Code Monkey home page Code Monkey logo

ublog's Introduction

Create LARAVEL APP

  laravel new name_test_app

Find PID number:

  ps -ef | grep mysql

Create migrations:

  php artisan make:model Post -m
  php artisan make:model Category -m

To run migrations:

  php artisan migrate

Create relations - Belongs To

In Post model, add the relation belongs to

  public function category($value='') { 
    return $this-> belongsTo(Category::class);
  }

And later, create the field which will recognize the ID from Category which will be stored on Post table. So, to add this column, go to the Post migration and insert the next field:

  public function up()
  {
      Schema::create('posts', function (Blueprint $table) {
          $table->increments('id');
          $table->string('title');
          $table->mediumText('excerpt');
          $table->text('body');
          $table->timestamp('published_at')->nullable();
          $table->unsignedInteger('category_id');
          $table->timestamps();
      });
  }

And after that, run the migration. If you want to return one migration below use the command:

  php artisan migrate:rollback

If you want to redefine every table you had created to don't run the command many times you can use:

  php artisan migrate:refresh
    Rolling back: 2018_01_12_023806_create_categories_table
    Rolling back: 2018_01_09_033003_create_posts_table
    Rolling back: 2014_10_12_100000_create_password_resets_table
    Rolling back: 2014_10_12_000000_create_users_table
  
    Migrated: 2014_10_12_000000_create_users_table
    Migrated: 2014_10_12_100000_create_password_resets_table
    Migrated: 2018_01_09_033003_create_posts_table
    Migrated: 2018_01_12_023806_create_categories_table
  

Create seeders:

Create a PostTable Seeder with the next command:

  php artisan make:seeder PostTableSeeder

Now, inside on /Database/seeds/DatabaseSeeder.php file, allow to the main seeder command the PostTableSeeder.php file.

  public function run () {
    $this->call(PostsTableSeeder::class);
  }

Now, inside of PostTableSeeder.php file we need to create the seeder information to load the dummy records which will be stored on the table.

Import the models:

  <?php
  
  use App\Post;
  use App\Category;
  use Carbon\Carbon;
  

Create de categories dummy data:

  use Illuminate\Database\Seeder;
  class PostTableSeeder extends Seeder {
    public function run() {
       
      Category::truncate();  // This line remove the last information stored
      Post::truncate();  // This line remove the last information stored
       
      $category = new Category;
      $category->name = 'Laravel';
      $category->save();
       
      $category = new Category;
      $category->name = 'Ruby on Rails';
      $category->save();
       
      $post = new Post;
      $post->title = "Nunc dignissim risus id metus.";
      $post->excerpt = "Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.";
      $post->body = "Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.";
      $post->published_at = Carbon::now()->subDays(2);
      $post->category_id = 2;
      $post->save();
       
      $post = new Post;
      $post->title = "Vestibulum auctor dapibus neque.";
      $post->excerpt = "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.";
      $post->body = "Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor.";
      $post->published_at = Carbon::now()->subDays(100);
      $post->category_id = 1;
      $post->save();
       
      $post = new Post;
      $post->title = "Vivamus molestie gravida turpis.";
      $post->excerpt = "Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.";
      $post->body = "Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada.";
      $post->published_at = Carbon::now()->subDays(300);
      $post->category_id = 2;
      $post->save();
    }
  }

Now, to run the seed action, you can use the next to commands:

  php artisan db:seed
  or 
  php artisan migrate:refresh --seed 

Create Tags with relations - Belongs To Many

First of all, we need to create the Tags model with the following command. This one, will create the model file and the migration "-m":

  php artisan make:model Tag -m

After that, we need to go to the migration to add the name field inside it:

  public function up()
  {
    Schema::create('tags', function (Blueprint $table) {
      $table->increments('id');
      $table->string('name');
      $table->timestamps();
    });
  }  

After that, we will run the Tags table migration, to build the table inside our DB system:

  php artisan migrate

Now we need to create the a table that will be storing the reference id records of each model data that will be added on the system:

  php artisan make:migration create_post_tag_table --create=post_tag

Now, we will open the last migration which we create before and going to add the new column fields we need to this table:

    public function up()
    {
      Schema::create('post_tag', function (Blueprint $table) {
        $table->increments('id');
        
        $table->unsignedInteger('post_id');
        $table->unsignedInteger('tag_id');
        
        $table->timestamps();
      });
    }

After that, we run the migrate command to create the intermediate table which will be filled with the references of any new tag will be added on our posts:

  php artisan migrate

After that, to set the Model Relation we need to go to the Post Model and insert the following code which is basically, create a new method to handle the relation between the model Post and the model Tag.

  public function tags() { 
    return $this-> belongsToMany(Tag::class);
  }   

Next, in the views we need to add the following code inside the rendered content:

  @foreach($post->tags as $tag)
    <span class="tag c-gris"> #{{ $tag->name }} </span>
  @endforeach

Creating an Admin Side with ADMINLTE

After improve the views with the content which will be neccesary to show, we have to create the internal system, which will be responsible to handle each modification to our DB records.

To improve this environment, we need to download the Admin LTE template with all of their features.

Inside our project, we need to open the Public folder and create another who calls adminlte:

  cd public
  mkdir adminlte

After that, we need to go to the folder from AdminLTE template and get the files which are stored inside the dist folder to paste it inside the public/adminlte folder.

  • css
  • img
  • js

And from the begining of our AdminLTE folder, we have also copy the next folder:

  • bower_components

Now, from this place, we need to start to code the template we will use to our dashboard system. To start to build our dashboard system, we can use the starter.html file what is stored on the root AdminLTE folder. We need to copy the whole file structure and next, we have to create a new folder inside Views called admin where will also create a file called layour.blade.php. Inside of it, we will copy the whole code we got of our starter file.

  cd views
  mkdir admin
  touch layout.blade.php

Now, to get ready whole of the depencies from this template, we need to reset some routes of any folders. In the next, we show you which ones have to be changed and also from where have to be changed.

  <html>
  <head>
   
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
     
    to
     
    
    <link rel="stylesheet" href="/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/adminlte/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/adminlte/css/skins/skin-blue.min.css">
    
     
    [ PAGE CONTENT ]
     
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="dist/js/adminlte.min.js"></script>
    
    to
    
    <script src="/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/adminlte/js/adminlte.min.js"></script>
    
  </body>
  </html>

Next, inside the class content from this template, we need to insert the yield helper to insert the different content we will display inside of it:

  <section class="content">
    @yield('content')
  </section>  

After that, we will to create a file who will serve the different content our views will display:

  cd views/admin
  touch dashboard.blade.php

And inside of it, we will extend the layout template and also, the content from the admin layout who will show us the header, the sidebar and other tools we going to can handle on the admin area.

  touch views/admin/dashboard.blade.php

  @extends('admin.layout')

  @section('content')
    <h1>Dashboard</h1>
  @stop

But even after to do this step, we need to add other element on our routes, because even we build this great system, we didn't set a route which one we can see this page. So, we will have to go to the routes file.

  Route::get('admin', function() {
    return view('admin.dashboard');
  });  

Now, if we visit the address http://127.0.0.1:8000/admin we will can see our dashboard working.

Creation of Login System

To create our login system, we can use the following command:

  php artisan make:auth --views
  Authentication scaffolding generated successfully.

This will respond with a new views which will created with the last command. The layout wil be placed on a folder called layouts and the main others like registration and login were be stored on auth folder.

  auth
    |_passwords
    |   |_ email.blade.php
    |   |_ reset.blade.php
    login.blade.php
    register.blade.php
  layouts
    |_ app.blade.php

After that, we need to insert the new route to our routes control.

  Route::auth();

Modifying the Login / Register Views

First we need to modify the extends helpers to our auth views to make the login views display like our admin platform.

  cd resources/views/auth/login.blade.php

  @extends('layouts.app') => @extends('admin.layout')

To disable Register Form

To disable the register records, push CMD + P to found a file Router.php called adding the word routing router:

  ublog/vendor/laravel/framework/src/illuminate/Routing/Router.php

And for search the method, add the push again CMD + P and add '@' sign to look for the auth method:

  public function auth()
  {
    // Authentication Routes...
    $this->get('login', 'Auth\LoginController@showLoginForm')->name('login');
    $this->post('login', 'Auth\LoginController@login');
    $this->post('logout', 'Auth\LoginController@logout')->name('logout');
    
    // Registration Routes...
    // $this->get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');
    // $this->post('register', 'Auth\RegisterController@register');
    
    // Password Reset Routes...
    $this->get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
    $this->post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
    $this->get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
    $this->post('password/reset', 'Auth\ResetPasswordController@reset');
  }  

Now, to create a user to test our forms, we need to go the terminal and open the Laravel Console to do that:

php artisan tinker
$user = new App\User;
=> App\User {#751}
$user->name = "William"
=> "William"
$user->email = "[email protected]"
=> "[email protected]"
$user->password = bcrypt('1234')
=> "$2y$10$xbPHecv2MzdNtpBoQKiPa.4LoV7AD7p04Hfb666H/.gQqFV7QxHGa"
$user->save()
=> true

After that, we will change the route we build to the admin site with the route home pointing to admin.dashboard:

Route::get('home', function() {
  return view('admin.dashboard');
});

Now, after we build the login, the predefined route and the user, we can login on our form and it will send us to the dashboard. On this, we can add our name to know that we are already authenticated.

  views/admin/layout.blade.php

  
  {{ auth()->user()->name }}
  

Using Middleware to prevent non-authorized views

To keep the dashboard views safe to our guests, we can add a Middleware, which is a function who do an action just if a statement is true. In this case, our middleware will be called auth. This middleware is a public method from the Auth system that Laravel uses to handle the login/registration tasks.

  routes/web.php

  Route::get('home', function() {
    return view('admin.dashboard');
  })->middleware('auth');

Now, if we loose our session or this expires, we will be redirected to login view.

Working Sidebar with Partials

To handle pieces of blocks whose going to be used on as a important items from a more bigger structure, we use partials. The idea is split the relevant contents to get a more structured view to read and work and for reuse the sidebar element inside of all our internal views. To create a partial, we will create a folder on our admin folder, which will be called partials, and inside, we will add the sidebar html code. After that, we will insert this part of code on the layout were was placed to keep this component on our view.

  cd views/admin/
  mkdir partials
  touch nav.blade.php

  ** COPY THE SIDEBAR CODE **

So, we have to add this sidebar on the layout file from our admin (dashboard) were was placed:

  
  @include('admin.partials.nav')
  

Handle sidebar actions with Controllers:

We need handle our frontpage views, so we will create a controller called PagesController which will serve the index page, contact page and the others. Controllers Laravel

  php artisan make:controller PagesController

And we will create a PagesController.php file. Now, we will add the instances variables we are getting from Post Model to display on the index page or root route. To do that, we need to go to our routes file to get the elements are declared inside the "/" address (root address) and we will point this action to the PagesController to serve the data was setted on our routes file.

  routes/web.php

  use Carbon\Carbon;

  // Route::get('/', function () {
  //   $today = Carbon::today();
  //   $posts = App\Post::latest('published_at')->get();
  //   return view('welcome', compact('posts', 'today'));
  // }); 

  TO:

  Route:get('/', 'PagesController@index');

  AND:

  app/Htptp/Controllers/PagesController.php

  <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use App\Post;
    use Carbon\Carbon;

    class PagesController extends Controller
    {
      public function home() {
        $today = Carbon::today();
        $posts = Post::latest('published_at')->get();
        return view('welcome', compact('posts', 'today'));    
      }
    }

To handle a new controller, first of all, we need to create an posts folder inside of admin main folder, to build the views we will use to create, display and update our posts.

After that, we will use the command make:controller to create our posts internal views.

  touch resources/views/admin/posts/index.blade.php
  php artisan make:controller Admin/PostsController

It will create our new Posts Controller, whose will be stored on our Admin folder, because will be used to handle the internal views to our projects related to the posts. After run this command, the command will create the file with the namespace pre-routed to our Admin folder.

Now inside our Posts Controller, we will be able to create the necessary views to handle a REST architecture. The first view we will create will be the index, so we need to add a public function called index() and also, add the view route on our router file.

  app/Http/Controllers/Admin/PostsController.php

  
  class PostsController extends Controller
  {
    public function index() {
      return view('admin.posts.index');
    }
  }
  

And, we have to declare the routes to handle the views.

  ublog/routes/web.php
  
  
  Route::get('admin/posts', 'Admin\PostsController@index');
  

  OR CREATE A GROUP FOR EVERY ROUTE WHICH USES THE PREFIX AND NAMESPACE ADMIN:
  
  
  Route::group(['prefix' => 'admin', 'namespace' => 'Admin', 'middleware' => 'auth'], function (){
    Route::get('posts', PostsController@index)->name('admin.posts.index');
  });
  

To add the link to the main admin posts view, we can use the route helper to add it on the link of the nav:

  &lgt;ul class="treeview-menu">
    &lgt;li>&lgt;a href="{{ route('admin.posts.index') }}">&lgt;i class="fa fa-eye">&lgt;/i>Ver posts&lgt;/a>&lgt;/li>
    &lgt;li>&lgt;a href="#">&lgt;i class="fa fa-pencil">&lgt;/i>Crear posts&lgt;/a>&lgt;/li>
  &lgt;/ul>

DEPLOY APP ON SERVER

  • Create database
  • Run migration
  curl -sS https://getcomposer.org/installer | php
  sudo mv composer.phar /usr/local/bin/composer

  sudo chown -R www-data: storage
  sudo chmod -R 775 /var/www/html/your-project/storage
  sudo chmod -R 755 /var/www/html/public/css
  sudo chmod -R 755 /var/www/html/public/img  
  sudo chmod -R 755 /var/www/html/public/adminLTE

  composer install
  composer update

  php artisan migrate

ublog's People

Contributors

williamromero avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.