{"id":832,"date":"2016-10-28T13:26:30","date_gmt":"2016-10-28T13:26:30","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=832"},"modified":"2016-11-06T08:18:15","modified_gmt":"2016-11-06T08:18:15","slug":"laravel-crud-with-materializecss","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2016\/10\/28\/laravel-crud-with-materializecss\/","title":{"rendered":"Laravel CRUD With MaterializeCSS"},"content":{"rendered":"

Source: Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part I<\/a>
\n& Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part II<\/a>
\nMaterializeCSS source: http:\/\/materializecss.com\/getting-started.html (I don’t use sass, so download the newest version http:\/\/materializecss.com\/bin\/materialize-v0.97.7.zip<\/a>)<\/p>\n

    \n
  1. Create a new laravel project named ‘crud-materialize’\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel$ composer create-project --prefer-dist laravel\/laravel crud-materialize\r\nInstalling laravel\/laravel (v5.3.16)\r\n  - Installing laravel\/laravel (v5.3.16)\r\n    Loading from cache\r\n\r\nCreated project in crud-materialize\r\n> php -r \"file_exists('.env') || copy('.env.example', '.env');\"\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\n  - Installing vlucas\/phpdotenv (v2.4.0)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/polyfill-mbstring (v1.2.0)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/var-dumper (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/translation (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/routing (v3.1.6)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/process (v3.1.6)\r\n    Loading from cache\r\n\r\n  - Installing psr\/log (1.0.2)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/debug (v3.1.6)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/http-foundation (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/event-dispatcher (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/http-kernel (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/finder (v3.1.6)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/console (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing swiftmailer\/swiftmailer (v5.4.3)\r\n    Loading from cache\r\n\r\n  - Installing paragonie\/random_compat (v2.0.3)\r\n    Loading from cache\r\n\r\n  - Installing ramsey\/uuid (3.5.1)\r\n    Loading from cache\r\n\r\n  - Installing jakub-onderka\/php-console-color (0.1)\r\n    Loading from cache\r\n\r\n  - Installing jakub-onderka\/php-console-highlighter (v0.3.2)\r\n    Loading from cache\r\n\r\n  - Installing dnoegel\/php-xdg-base-dir (0.1)\r\n    Loading from cache\r\n\r\n  - Installing nikic\/php-parser (v2.1.1)\r\n    Loading from cache\r\n\r\n  - Installing psy\/psysh (v0.7.2)\r\n    Loading from cache\r\n\r\n  - Installing nesbot\/carbon (1.21.0)\r\n    Loading from cache\r\n\r\n  - Installing mtdowling\/cron-expression (v1.1.0)\r\n    Loading from cache\r\n\r\n  - Installing monolog\/monolog (1.21.0)\r\n    Loading from cache\r\n\r\n  - Installing league\/flysystem (1.0.32)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/polyfill-util (v1.2.0)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/polyfill-php56 (v1.2.0)\r\n    Loading from cache\r\n\r\n  - Installing jeremeamia\/superclosure (2.2.0)\r\n    Loading from cache\r\n\r\n  - Installing doctrine\/inflector (v1.1.0)\r\n    Loading from cache\r\n\r\n  - Installing classpreloader\/classpreloader (3.0.0)\r\n    Loading from cache\r\n\r\n  - Installing laravel\/framework (v5.3.21)\r\n    Downloading: 100%         \r\n\r\n  - Installing fzaninotto\/faker (v1.6.0)\r\n    Loading from cache\r\n\r\n  - Installing hamcrest\/hamcrest-php (v1.2.2)\r\n    Loading from cache\r\n\r\n  - Installing mockery\/mockery (0.9.5)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/yaml (v3.1.6)\r\n    Downloading: 100%         \r\n\r\n  - Installing sebastian\/version (2.0.0)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/resource-operations (1.0.0)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/recursion-context (1.0.2)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/object-enumerator (1.0.0)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/global-state (1.1.1)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/exporter (1.2.2)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/environment (1.3.8)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/diff (1.4.1)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/comparator (1.2.0)\r\n    Loading from cache\r\n\r\n  - Installing doctrine\/instantiator (1.0.5)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/php-text-template (1.2.1)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/phpunit-mock-objects (3.4.0)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/php-timer (1.0.8)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/php-file-iterator (1.4.1)\r\n    Loading from cache\r\n\r\n  - Installing sebastian\/code-unit-reverse-lookup (1.0.0)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/php-token-stream (1.4.8)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/php-code-coverage (4.0.1)\r\n    Loading from cache\r\n\r\n  - Installing webmozart\/assert (1.1.0)\r\n    Loading from cache\r\n\r\n  - Installing phpdocumentor\/reflection-common (1.0)\r\n    Loading from cache\r\n\r\n  - Installing phpdocumentor\/type-resolver (0.2)\r\n    Loading from cache\r\n\r\n  - Installing phpdocumentor\/reflection-docblock (3.1.1)\r\n    Loading from cache\r\n\r\n  - Installing phpspec\/prophecy (v1.6.1)\r\n    Loading from cache\r\n\r\n  - Installing myclabs\/deep-copy (1.5.4)\r\n    Loading from cache\r\n\r\n  - Installing phpunit\/phpunit (5.6.2)\r\n    Downloading: 100%         \r\n\r\n  - Installing symfony\/css-selector (v3.1.6)\r\n    Loading from cache\r\n\r\n  - Installing symfony\/dom-crawler (v3.1.6)\r\n    Downloading: 100%         \r\n\r\nsymfony\/var-dumper suggests installing ext-symfony_debug ()\r\nsymfony\/translation suggests installing symfony\/config ()\r\nsymfony\/routing suggests installing doctrine\/annotations (For using the annotation loader)\r\nsymfony\/routing suggests installing symfony\/config (For using the all-in-one router or any loader)\r\nsymfony\/routing suggests installing symfony\/dependency-injection (For loading routes from a service)\r\nsymfony\/routing suggests installing symfony\/expression-language (For using expression matching)\r\nsymfony\/event-dispatcher suggests installing symfony\/dependency-injection ()\r\nsymfony\/http-kernel suggests installing symfony\/browser-kit ()\r\nsymfony\/http-kernel suggests installing symfony\/class-loader ()\r\nsymfony\/http-kernel suggests installing symfony\/config ()\r\nsymfony\/http-kernel suggests installing symfony\/dependency-injection ()\r\nparagonie\/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.)\r\nramsey\/uuid suggests installing ircmaxell\/random-lib (Provides RandomLib for use with the RandomLibAdapter)\r\nramsey\/uuid suggests installing ext-libsodium (Provides the PECL libsodium extension for use with the SodiumRandomGenerator)\r\nramsey\/uuid suggests installing ext-uuid (Provides the PECL UUID extension for use with the PeclUuidTimeGenerator and PeclUuidRandomGenerator)\r\nramsey\/uuid suggests installing moontoast\/math (Provides support for converting UUID to 128-bit integer (in string form).)\r\nramsey\/uuid suggests installing ramsey\/uuid-doctrine (Allows the use of Ramsey\\Uuid\\Uuid as Doctrine field type.)\r\nramsey\/uuid suggests installing ramsey\/uuid-console (A console application for generating UUIDs with ramsey\/uuid)\r\npsy\/psysh suggests installing ext-pdo-sqlite (The doc command requires SQLite to work.)\r\nmonolog\/monolog suggests installing aws\/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)\r\nmonolog\/monolog suggests installing doctrine\/couchdb (Allow sending log messages to a CouchDB server)\r\nmonolog\/monolog suggests installing ext-amqp (Allow sending log messages to an AMQP server (1.0+ required))\r\nmonolog\/monolog suggests installing ext-mongo (Allow sending log messages to a MongoDB server)\r\nmonolog\/monolog suggests installing graylog2\/gelf-php (Allow sending log messages to a GrayLog2 server)\r\nmonolog\/monolog suggests installing mongodb\/mongodb (Allow sending log messages to a MongoDB server via PHP Driver)\r\nmonolog\/monolog suggests installing php-amqplib\/php-amqplib (Allow sending log messages to an AMQP server using php-amqplib)\r\nmonolog\/monolog suggests installing php-console\/php-console (Allow sending log messages to Google Chrome)\r\nmonolog\/monolog suggests installing rollbar\/rollbar (Allow sending log messages to Rollbar)\r\nmonolog\/monolog suggests installing ruflin\/elastica (Allow sending log messages to an Elastic Search server)\r\nmonolog\/monolog suggests installing sentry\/sentry (Allow sending log messages to a Sentry server)\r\nleague\/flysystem suggests installing league\/flysystem-aws-s3-v2 (Allows you to use S3 storage with AWS SDK v2)\r\nleague\/flysystem suggests installing league\/flysystem-aws-s3-v3 (Allows you to use S3 storage with AWS SDK v3)\r\nleague\/flysystem suggests installing league\/flysystem-azure (Allows you to use Windows Azure Blob storage)\r\nleague\/flysystem suggests installing league\/flysystem-cached-adapter (Flysystem adapter decorator for metadata caching)\r\nleague\/flysystem suggests installing league\/flysystem-copy (Allows you to use Copy.com storage)\r\nleague\/flysystem suggests installing league\/flysystem-dropbox (Allows you to use Dropbox storage)\r\nleague\/flysystem suggests installing league\/flysystem-eventable-filesystem (Allows you to use EventableFilesystem)\r\nleague\/flysystem suggests installing league\/flysystem-rackspace (Allows you to use Rackspace Cloud Files)\r\nleague\/flysystem suggests installing league\/flysystem-sftp (Allows you to use SFTP server storage via phpseclib)\r\nleague\/flysystem suggests installing league\/flysystem-webdav (Allows you to use WebDAV storage)\r\nleague\/flysystem suggests installing league\/flysystem-ziparchive (Allows you to use ZipArchive adapter)\r\nlaravel\/framework suggests installing aws\/aws-sdk-php (Required to use the SQS queue driver and SES mail driver (~3.0).)\r\nlaravel\/framework suggests installing doctrine\/dbal (Required to rename columns and drop SQLite columns (~2.4).)\r\nlaravel\/framework suggests installing guzzlehttp\/guzzle (Required to use the Mailgun and Mandrill mail drivers and the ping methods on schedules (~5.3|~6.0).)\r\nlaravel\/framework suggests installing league\/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (~1.0).)\r\nlaravel\/framework suggests installing league\/flysystem-rackspace (Required to use the Flysystem Rackspace driver (~1.0).)\r\nlaravel\/framework suggests installing pda\/pheanstalk (Required to use the beanstalk queue driver (~3.0).)\r\nlaravel\/framework suggests installing predis\/predis (Required to use the redis cache and queue drivers (~1.0).)\r\nlaravel\/framework suggests installing pusher\/pusher-php-server (Required to use the Pusher broadcast driver (~2.0).)\r\nlaravel\/framework suggests installing symfony\/psr-http-message-bridge (Required to use psr7 bridging features (0.2.*).)\r\nsebastian\/global-state suggests installing ext-uopz (*)\r\nphpunit\/phpunit-mock-objects suggests installing ext-soap (*)\r\nphpunit\/php-code-coverage suggests installing ext-xdebug (>=2.4.0)\r\nphpunit\/phpunit suggests installing phpunit\/php-invoker (~1.1)\r\nphpunit\/phpunit suggests installing ext-xdebug (*)\r\nWriting lock file\r\nGenerating autoload files\r\n> Illuminate\\Foundation\\ComposerScripts::postUpdate\r\n> php artisan optimize\r\nGenerating optimized class loader\r\nThe compiled class file has been removed.\r\n> php artisan key:generate\r\nApplication key [base64:bcsSsz8gPXQrB5rmUX4zXCmfkbIt6QW7IFiC\/01QpRQ=] set successfully.<\/pre>\n
     <\/li>\n
  2. Download materialize from the above link if haven’t downloaded it. Then extract the file. Here is how the folders and files look after extracting\"materialize\"<\/a>Only 3 folders (css, fonts and js) and 2 files.
    \nThen copy\/cut the above folders and file into ‘public’ in our laravel project directory (\/crud-materialize\/public\/). It’ll merge the css and js folders.<\/li>\n
  3. Go into the project directory ‘crud-materialize’ then create a controller with name ‘CrudController’\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel$ cd crud-materialize\/\r\nteddy@teddy-K43SJ:~\/Documents\/works\/laravel\/crud-materialize$ php artisan make:controller CrudController --resource\r\nController created successfully.<\/pre>\n
    We can look up the new file CrudController.php in \/app\/Http\/Controllers\/ directory.<\/li>\n
  4. Modify CrudController.php then edit ‘index’ function to call our view. It’d be like this:\n
    public function index()\r\n{\r\n    return view('show');\r\n}<\/pre>\n
     <\/li>\n
  5. Modify \/routes\/web.php to change the default route (welcome) to call index function in CrudController:\n
    \/*Route::get('\/', function () {\r\n    return view('welcome');\r\n});*\/\r\nRoute::get('\/','CrudController@index');<\/pre>\n<\/li>\n
  6. It’s time to mess with the views. Create a new directory ‘layouts’ in \/resources\/views\/. Then in it (layouts), create two blades files: index.blade.php and header.blade.php. Also create a new blade file show.blade.php in \/resources\/views\/:
    \n\/resources\/views\/layouts\/index.blade.php:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <title>CRUD Laravel With Materializecss<\/title>\r\n        <link rel=\"stylesheet\" href=\"{{asset('css\/materialize.min.css')}}\">\r\n        <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n        <meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\" name=\"viewport\">\r\n        @section('css')\r\n\r\n        @show\r\n    <\/head>\r\n    <body>\r\n        @section('header')\r\n            @include('layouts.header')\r\n        @show\r\n\r\n        <div class=\"container\">\r\n            @yield('content')\r\n        <\/div>\r\n\r\n        <script src=\"https:\/\/code.jquery.com\/jquery-2.1.1.min.js\"><\/script>\r\n        <script src=\"{{asset('js\/materialize.min.js')}}\"><\/script>\r\n        <script type=\"text\/javascript\">\r\n            (function($){\r\n              $(function(){\r\n\r\n                $('.button-collapse').sideNav();\r\n\r\n              }); \/\/ end of document ready\r\n            })(jQuery); \/\/ end of jQuery name space\r\n        <\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
    \/resources\/views\/layouts\/header.blade.php:<\/p>\n
    <nav class=\"pink accent-3\" role=\"navigation\">\r\n    <div class=\"nav-wrapper container\">\r\n        <a id=\"logo-container\" href=\"#\" class=\"brand-logo\">Laravel<\/a>\r\n        <ul class=\"right hide-on-med-and-down\">\r\n            <li><a href=\"{{ url('\/')}}\">Home<\/a><\/li>\r\n        <\/ul>\r\n\r\n        <ul id=\"nav-mobile\" class=\"side-nav\">\r\n            <li><a href=\"{{ url('\/')}}\">Home<\/a><\/li>\r\n        <\/ul>\r\n        <a href=\"#\" data-activates=\"nav-mobile\" class=\"button-collapse\"><i class=\"material-icons\">menu<\/i><\/a>\r\n    <\/div>\r\n<\/nav><\/pre>\n
    \/resources\/views\/show.blade.php:<\/p>\n
    @extends('layouts.index')\r\n@section('content')\r\n\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Tutorial - CRUD Laravel With Materializecss<\/div>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n    <div class=\"row\">\r\n        <div class=\"col s12\">\r\n            <h5>Here the title<\/h5>\r\n\r\n            <div class=\"divider\"><\/div>\r\n            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,<\/p>\r\n                \r\n            <button class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Readmore <i class=\"material-icons right\">send<\/i><\/button>\r\n            <button class=\"btn btn-flat purple darken-4 waves-effect waves-light white-text\">Edit <i class=\"material-icons right\">mode_edit<\/i><\/button>\r\n            <button class=\"btn btn-flat red darken-4 waves-effect waves-light white-text\">Delete <i class=\"material-icons right\">delete<\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"row\">\r\n        <div class=\"col s12\">\r\n            <h5>Here the title<\/h5>\r\n\r\n            <div class=\"divider\"><\/div>\r\n            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,<\/p>\r\n                \r\n            <button class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Readmore <i class=\"material-icons right\">send<\/i><\/button>\r\n            <button class=\"btn btn-flat purple darken-4 waves-effect waves-light white-text\">Edit <i class=\"material-icons right\">mode_edit<\/i><\/button>\r\n            <button class=\"btn btn-flat red darken-4 waves-effect waves-light white-text\">Delete <i class=\"material-icons right\">delete<\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"row\">\r\n        <div class=\"col s12\">\r\n            <h5>Here the title<\/h5>\r\n\r\n            <div class=\"divider\"><\/div>\r\n            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,<\/p>\r\n                \r\n            <button class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Readmore <i class=\"material-icons right\">send<\/i><\/button>\r\n            <button class=\"btn btn-flat purple darken-4 waves-effect waves-light white-text\">Edit <i class=\"material-icons right\">mode_edit<\/i><\/button>\r\n            <button class=\"btn btn-flat red darken-4 waves-effect waves-light white-text\">Delete <i class=\"material-icons right\">delete<\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"fixed-action-btn horizontal\" style=\"bottom: 45px; right: 24px;\">\r\n    <a class=\"btn-floating btn-large red\">\r\n      <i class=\"large material-icons\">add<\/i>\r\n    <\/a>\r\n  <\/div>\r\n\r\n\r\n@endsection<\/pre>\n
     <\/li>\n
  7. Turn on the server (‘php artisan serve’) and see the look (http:\/\/localhost:8000\/)\"crud-laravel-materializecss\"<\/a><\/li>\n
  8. Setting database!\u00a0Modify .env file in \/crud-materialize\/ directory to set the database setting:\n
    DB_CONNECTION=mysql\r\nDB_HOST=127.0.0.1\r\nDB_PORT=3306\r\nDB_DATABASE=crud-materialize\r\nDB_USERNAME=your-username\r\nDB_PASSWORD=your-password<\/pre>\n
    Now we’re not going to use phpmyadmin to create the database. We’ll do it by ‘php artisan migrate’ command<\/del> I dont know how to do it and it seems more complicated than I expected so I create the database ‘crud-materialize’ (collation: utf8-general-ci) through phpmyadmin.<\/li>\n
  9. Create a new table ‘crud’\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel\/crud-materialize$ php artisan make:migration create_crud_table --create=crud\r\nCreated Migration: 2016_10_29_030815_create_crud_table<\/pre>\n
    Check \/database\/migrations\/ directory for the script to create ‘crud’ table (2016_10_29_030815_create_crud_table.php). It’d also create two more scripts to create ‘users’ (2014_10_12_000000_create_users_table.php) and ‘password_reset’ table (2014_10_12_100000_create_password_resets_table.php) automatically (if they are not existed yet!). It’s safe to remove its or leave its because we only focus on the ‘crud’ table.<\/li>\n
  10. Edit 2016_10_29_030815_create_crud_table.php to add two more fields (‘title’ and ‘content’).
    \nDefaultly, there are two fields available in the file, they are ‘id’ and timestamps. Just insert the above two more fields between them<\/p>\n
    public function up()\r\n{\r\n    Schema::create('crud', function (Blueprint $table) {\r\n        $table->increments('id');\r\n        $table->string('title');\r\n        $table->text('content');\r\n        $table->timestamps();\r\n    });\r\n}<\/pre>\n<\/li>\n
  11. Migrate (push) the tables to our database\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel\/crud-materialize$ php artisan migrate\r\nMigration table created successfully.\r\nMigrated: 2014_10_12_000000_create_users_table\r\nMigrated: 2014_10_12_100000_create_password_resets_table\r\nMigrated: 2016_10_29_030815_create_crud_table<\/pre>\n
    Check those tables in ‘crud-materialize’ database.<\/li>\n
  12. Create a new model ‘Crud’\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel\/crud-materialize$ php artisan make:model Crud\r\nModel created successfully.<\/pre>\n
    Check a new file ‘Crud.php’ in \/app\/ directory!<\/li>\n
  13. Modify Crud.php like this:\n
    class Crud extends Model\r\n{\r\n    protected $table = 'crud';\r\n    protected $primaryKey = 'id';\r\n    protected $fillable = ['title','content'];\r\n    public $timestamps = true;\r\n}<\/pre>\n
    Then create a new data in ‘crud’ table via phpmyadmin:
    \n‘title’: ‘Title 1’
    \n‘content’: ‘Content 1 Content 1 Content 1 Content 1 Content 1’<\/li>\n
  14. Retrieve the new data through CrudController\n
    ...\r\nuse App\\Crud;\r\n\r\nclass CrudController extends Controller\r\n{\r\n    public function index()\r\n    {\r\n        $data=Crud::orderBy('id','DESC')->paginate(10);\r\n        \/\/return view('show');\r\n        return view('show')->with('data',$data);\r\n    }\r\n    ...\r\n}<\/pre>\n
    We’ll throw the ‘data’ into our view ‘show’.<\/li>\n
  15. Modify show.blade.php in \/resources\/views\/ to get and show the data from CrudController above\n
    ...\r\n<div class=\"section\">\r\n    @foreach($data as $d)\r\n    <div class=\"row\">\r\n        <div class=\"col s12\">\r\n            <h5>{{$d->title}}<\/h5>\r\n\r\n            <div class=\"divider\"><\/div>\r\n            <p>{!!substr($d->content,0,100) !!}...<\/p>\r\n                \r\n            <button class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Readmore <i class=\"material-icons right\">send<\/i><\/button>\r\n            <button class=\"btn btn-flat purple darken-4 waves-effect waves-light white-text\">Edit <i class=\"material-icons right\">mode_edit<\/i><\/button>\r\n            <button class=\"btn btn-flat red darken-4 waves-effect waves-light white-text\">Delete <i class=\"material-icons right\">delete<\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    @endforeach\r\n<\/div>\r\n...<\/pre>\n
    We use ‘foreach’ loop, so just use one ‘row’ class and remove the others two.<\/li>\n
  16. Test!\"crud-materializecss-show\"<\/a><\/li>\n
  17. Now we want to make the Add, Edit and Delete buttons can be functioned properly. For the Add function, modify \/app\/Http\/Controllers\/CrudController.php at ‘create’ function to view ‘add’:\n
    public function create()\r\n{\r\n    return view('add');\r\n}\r\n<\/pre>\n
    Then create a new route for this in \/routes\/web.app:<\/p>\n
    Route::get('\/add','CrudController@create');<\/pre>\n
    Create a new blade file ‘add.blade.php’ in \/resources\/views\/ to show the form:<\/p>\n
    @extends('layouts.index')\r\n@section('content')\r\n\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Tutorial - CRUD Laravel With Materializecss<\/div>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n  <form action=\"{{ url('store') }}\" method=\"POST\">\r\n  {{ csrf_field() }}\r\n    <div class=\"row\">\r\n          <div class=\"input-field col s12\">\r\n            <input type=\"text\" class=\"validate\" name=\"title\">\r\n            <label for=\"title\">Title<\/label>\r\n          <\/div>\r\n    <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"input-field col s12\">\r\n          <textarea id=\"textarea1\" class=\"materialize-textarea\" name=\"content\"><\/textarea>\r\n          <label for=\"textarea1\">Content<\/label>\r\n        <\/div>\r\n      <\/div>\r\n      <button type=\"submit\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text right\">Submit <i class=\"material-icons right\">send<\/i><\/button>\r\n  <\/form>\r\n<\/div>\r\n\r\n@endsection<\/pre>\n
    In ‘show.blade.php’ we can add an url to ‘add’ route when anyone click the ‘add’ button:<\/p>\n
    ...\r\n<div class=\"fixed-action-btn horizontal\" style=\"bottom: 45px; right: 24px;\">\r\n    <a class=\"btn-floating btn-large red\" href=\"{{url('add')}}\">\r\n        <i class=\"large material-icons\">add<\/i>\r\n    <\/a>\r\n<\/div>\r\n...<\/pre>\n
    OK. Here is the add form when we click the add (+) button (http:\/\/localhost:8000\/add)\"crud-materializecss-add\"<\/a>Now we’re going to make ‘Submit’ button work. First, add a new route for ‘store’ in \/routes\/web.app. ATTENTION! Here we use POST (Route::post) NOT GET (Route::get):<\/p>\n
    Route::post('\/store','CrudController@store');<\/pre>\n
    Then modify ‘store’ function in \/app\/Http\/Controllers\/CrudController.php to validate and store the form:<\/p>\n
    public function store(Request $request)\r\n{\r\n    $this->validate($request, [\r\n        'title'=>'required',\r\n        'content'=>'required'\r\n    ]);\r\n    \r\n    $add=new Crud();\r\n    $add->title=$request['title'];\r\n    $add->content=$request['content'];\r\n    $add->save();\r\n    \r\n    return redirect()->to('\/');\r\n}<\/pre>\n
    OK. Try to add a new data (http:\/\/localhost:8000\/add)\"crud-materializecss-add-data\"<\/a>Here is the result\"crud-materializecss-show-data\"<\/a><\/li>\n
  18. Show individual data. We want to show the data if anyone click ‘Readmore’ button.
    \nAdd a new route ‘read’ that need ‘id’ parameter in \/routes\/web.app:<\/p>\n
    Route::get('\/read\/{id}','CrudController@show');<\/pre>\n
    Apply the route at ‘Readmore’ link in \/resources\/views\/show.blade.php:<\/p>\n
    <a href=\"{{url('read',$d->id)}}\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Readmore <i class=\"material-icons right\">send<\/i><\/a><\/pre>\n
    Modify ‘show’ function in \/app\/Http\/Controllers\/CrudController.php to get the data based on id and show the data by throwing it to our new view ‘showdata’:<\/p>\n
    public function show($id)\r\n{\r\n    $show=Crud::find($id);\r\n    return view('showdata')->with('show',$show);\r\n}\r\n<\/pre>\n
    Create a new blade file ‘showdata.blade.php’ in \/resources\/views\/ like this:<\/p>\n
    @extends('layouts.index')\r\n@section('content')\r\n\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Tutorial - CRUD Laravel With Materializecss<\/div>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n    \r\n    <div class=\"row\">\r\n        <div class=\"col s12\">\r\n            <h5>{{ $show->title }}<\/h5>\r\n\r\n            <div class=\"divider\"><\/div>\r\n            <p>{!! $show->content !!}<\/p>\r\n            \r\n            <a href=\"{{url('\/')}}\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Back <i class=\"material-icons right\">undo<\/i><\/a>    \r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n@endsection<\/pre>\n
    OK. Test it by clicking ‘Readmore’ or directly by url like http:\/\/localhost:8000\/read\/2\"crud-materializecss-show-data-id\"<\/a>I added a new ‘Back’ button. please see the complete materialize icon<\/a>. Click ‘Back’ button to redirect back to the homepage.<\/li>\n
  19. Pagination. To show the pagination,\u00a0 we need to add more data. Just use ‘add’ button. Now we want to show just two data per page. So modify ‘index’ function in \/app\/Http\/Controllers\/CrudController.php like this:\n
    public function index()\r\n{\r\n    $data=Crud::orderBy('id','DESC')->paginate(2); \/\/display 2 data per page\r\n    return view('show')->with('data',$data);\r\n}\r\n<\/pre>\n
    To show the pagination counter and the pages, modify \/resources\/views\/show.blade.php to add ‘{{$data->render()}}’ just before @endsection:<\/p>\n
    ...\r\n{{$data->render()}}\r\n@endsection<\/pre>\n
    Here is the result (the url would be like http:\/\/localhost:8000\/?page=1):\"crud-materializecss-pagination\"<\/a><\/li>\n
  20. Edit data.
    \nCreate two new routes in \/routes\/web.php. the first to edit the data and the last to update the changes:<\/p>\n
    Route::get('\/edit\/{id}','CrudController@edit');\r\nRoute::post('\/update\/{id}','CrudController@update');<\/pre>\n
    Modify ‘edit’ and ‘update’ function in \/app\/Http\/Controllers\/CrudController.php:<\/p>\n
    ...\r\npublic function edit($id)\r\n{\r\n    \/\/$data=Crud::find($id); \/\/SAME WITH BELOW\r\n    $data=Crud::where('id',$id)->first();\r\n    return view('edit')->with('data',$data);\r\n}\r\n...\r\npublic function update(Request $request, $id)\r\n{\r\n    $update=Crud::where('id',$id)->first();\r\n    $update->title=$request['title'];\r\n    $update->content=$request['content'];\r\n    $update->update();\r\n    \r\n    return redirect()->to('\/');\r\n}\r\n...\r\n<\/pre>\n
    Then create a new blade file ‘edit.blade.php’ in \/resources\/views\/. this file basically same with ‘add.blade.php’ but the form url and the input values are different:<\/p>\n
    @extends('layouts.index')\r\n@section('content')\r\n\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Tutorial - CRUD Laravel With Materializecss<\/div>\r\n<\/div>\r\n\r\n<div class=\"section\">\r\n  <form action=\"{{ url('update',$data->id) }}\" method=\"POST\">\r\n  {{ csrf_field() }}\r\n    <div class=\"row\">\r\n          <div class=\"input-field col s12\">\r\n            <input type=\"text\" class=\"validate\" name=\"title\" value=\"{{$data->title}}\">\r\n            <label for=\"title\">Title<\/label>\r\n          <\/div>\r\n    <\/div>\r\n      <div class=\"row\">\r\n        <div class=\"input-field col s12\">\r\n          <textarea id=\"textarea1\" class=\"materialize-textarea\" name=\"content\">{{$data->content}}<\/textarea>\r\n          <label for=\"textarea1\">Content<\/label>\r\n        <\/div>\r\n      <\/div>\r\n      <a href=\"{{url('\/')}}\" class=\"btn btn-flat purple accent-3 waves-effect waves-light white-text\">Back <i class=\"material-icons right\">undo<\/i><\/a>\r\n      <button type=\"submit\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text right\">Submit <i class=\"material-icons right\">send<\/i><\/button>\r\n  <\/form>\r\n<\/div>\r\n\r\n@endsection<\/pre>\n
    Dont forget to modify ‘Edit’ button\/link in ‘show.blade.php’ to add the ‘edit’ route:<\/p>\n
    ...\r\n<a href=\"{{url('edit',$d->id)}}\" class=\"btn btn-flat purple darken-4 waves-effect waves-light white-text\">Edit <i class=\"material-icons right\">mode_edit<\/i><\/a>\r\n...<\/pre>\n
     <\/li>\n
  21. Delete data.
    \nCreate a new route ‘delete’ in \/routes\/web.php:<\/p>\n
    Route::get('\/delete\/{id}','CrudController@destroy');<\/pre>\n
    Then modify ‘destroy’ function in \/app\/Http\/Controllers\/CrudController.php to delete the data:<\/p>\n
    public function destroy($id)\r\n{\r\n    $delete=Crud::find($id);\r\n    $delete->delete(); \r\n    \r\n    return redirect()->to('\/');\r\n}\r\n<\/pre>\n
    Modify ‘Delete’ button\/link in \/resources\/views\/show.blade.php to apply the delete route and give javascript confirmation about the deletion:<\/p>\n
    <a href=\"{{url('delete',$d->id)}}\" onclick=\"return confirm('Are you sure to delete this data?')\" class=\"btn btn-flat red darken-4 waves-effect waves-light white-text\">Delete <i class=\"material-icons right\">delete<\/i><\/a><\/pre>\n
    FINISH!
    \nNEXT: Add User authentication and comment section!<\/li>\n
  22. User Authentication.
    \nUse default scaffolding ‘auth’<\/p>\n
    teddy@teddy-K43SJ:~\/Documents\/works\/laravel\/crud-materialize$ php artisan make:auth\r\nAuthentication scaffolding generated successfully.<\/pre>\n
    Like I said before, it’ll create user authentication (login, register, password, etc) automatically. Please check the views in \/resources\/views\/auth\/ directory!
    \nAlso check the routes in \/routes\/web.php. It’ll create two new routes:<\/p>\n
    ...\r\nAuth::routes();\r\n\r\nRoute::get('\/home', 'HomeController@index');<\/pre>\n
    About this route ‘Auth::routes()’, from http:\/\/stackoverflow.com\/questions\/39196968\/laravel-5-3-new-authroutes\/39197278#39197278<\/a>, it said<\/p>\n
    Auth::routes() is just a helper class that helps you generate all the routes required for user authentication. You can browse the code here https:\/\/github.com\/laravel\/framework\/blob\/5.3\/src\/Illuminate\/Routing\/Router.php instead.<\/pre>\n
    More read https:\/\/laracasts.com\/discuss\/channels\/laravel\/laravel-53-routing-as-authroutes?page=1<\/a>.<\/li>\n
  23. Modify \/resources\/views\/layouts\/header.blade.php, to add new links ‘login’ and ‘register’:\n
    <ul class=\"right hide-on-med-and-down\">\r\n    <li><a href=\"{{ url('\/')}}\">Home<\/a><\/li>\r\n    @if(Route::has('login'))\r\n    <li><a href=\"{{ url('\/login')}}\">Login<\/a><\/li>\r\n    <li><a href=\"{{ url('\/register')}}\">Register<\/a><\/li>\r\n    @endif\r\n<\/ul><\/pre>\n
    Here is the looks\"crud-materializecss-auth\"<\/a>Click ‘Login’ link, it’d display the login page. But we can see the layout (header, color, etc) is different with our homepage.<\/li>\n
  24. Edit \/resources\/views\/auth\/login.blade.php.
    \nReplace the first line ‘@extends(‘layouts.app’)’ with ‘@extends(‘layouts.index’)’. When we refresh our website, the header show the same layout with our homepage. But the others element are still different. ‘auth’ scaffolding create the views based on bootstrap css but we use materialize css for homepage.    \"crud-materializecss-auth-login\"<\/a>Modify login.blade.php to add some elements like validation, error,etc like this: NOTE: somehow {!! csrf_field() !!} DIDN’T WORK (verifycsrftoken error) SO I WRITE {{ csrf_field() }}<\/p>\n
    @extends('layouts.index')\r\n\r\n@section('content')\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Tutorial - CRUD Laravel With Materializecss<\/div>\r\n<\/div>\r\n<div class=\"section\">\r\n    <form id=\"formValidate\" action=\"{{ url('\/login') }}\" method=\"POST\">\r\n        {{ csrf_field() }}\r\n        <div class=\"row {{ $errors->has('email') ? ' has-error' : '' }}\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">email<\/i>\r\n                <input id=\"email\" type=\"email\" class=\"validate\" name=\"email\" value=\"{{ old('email') }}\" data-error=\".errorEmail\" required>\r\n                <label for=\"email\">E-Mail Address<\/label>\r\n                <div class=\"errorEmail\">\r\n                @if ($errors->has('email'))\r\n                    <div class=\"error\">{{ $errors->first('email') }}<\/div>\r\n                @endif\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row {{ $errors->has('password') ? ' has-error' : '' }}\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">vpn_key<\/i>\r\n                <input id=\"password\" type=\"password\" class=\"validate\" name=\"password\" data-error=\".errorPassword\" required>\r\n                <label for=\"password\">Password<\/label>\r\n                <div class=\"errorPassword\">\r\n                @if ($errors->has('password'))\r\n                    <div class=\"error\">{{ $errors->first('password') }}<\/div>\r\n                @endif\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <input id=\"remember\" type=\"checkbox\" class=\"checkbox\" name=\"remember\">\r\n                <label for=\"remember\">Remember Me<\/label>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <button type=\"submit\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Login <i class=\"material-icons right\">send<\/i><\/button>\r\n                <a href=\"{{url('\/password\/reset')}}\" class=\"btn btn-flat purple accent-3 waves-effect waves-light white-text\">Forgot Your Password? <i class=\"material-icons right\">help<\/i><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/form>\r\n<\/div>\r\n\r\n\r\n@endsection<\/pre>\n
    The validations need jquery-validation library, so download and put the jquery files (jquery.validate.min.js and additional-methods.min.js) in \/public\/js\/. Then link them in \/resources\/views\/layouts\/index.blade.php also write the jquery validation (here i changed the jquery to the newer version 1.11.2). Please read\u00a0Forms Validation<\/a> to learn more about the validation form for materialize css.<\/p>\n
    <script src=\"https:\/\/code.jquery.com\/jquery-1.11.2.min.js\"><\/script>\r\n<script src=\"{{asset('js\/materialize.min.js')}}\"><\/script>\r\n<script src=\"{{asset('js\/jquery-validation\/jquery.validate.min.js')}}\"><\/script>\r\n<script src=\"{{asset('js\/jquery-validation\/additional-methods.min.js')}}\"><\/script>\r\n<script type=\"text\/javascript\">\r\n    (function($){\r\n      $(function(){\r\n\r\n        $('.button-collapse').sideNav();\r\n        \r\n        $(\"#formValidate\").validate({\r\n            rules: {\r\n                uname: {\r\n                    required: true,\r\n                    minlength: 5\r\n                },\r\n                email: {\r\n                    required: true,\r\n                    email:true\r\n                },\r\n                password: {\r\n                    required: true,\r\n                    minlength: 5\r\n                },\r\n                cpassword: {\r\n                    required: true,\r\n                    minlength: 5,\r\n                    equalTo: \"#password\"\r\n                },\r\n                curl: {\r\n                    required: true,\r\n                    url:true\r\n                },\r\n                crole:\"required\",\r\n                ccomment: {\r\n                    required: true,\r\n                    minlength: 15\r\n                },\r\n                cgender:\"required\",\r\n                cagree:\"required\",\r\n            },\r\n            \/\/For custom messages\r\n            messages: {\r\n                uname:{\r\n                    required: \"Enter a username\",\r\n                    minlength: \"Enter at least 5 characters\"\r\n                },\r\n                curl: \"Enter your website\",\r\n            },\r\n            errorElement : 'div',\r\n            errorPlacement: function(error, element) {\r\n              var placement = $(element).data('error');\r\n              if (placement) {\r\n                $(placement).append(error)\r\n              } else {\r\n                error.insertAfter(element);\r\n              }\r\n            }\r\n         });\r\n\r\n      }); \/\/ end of document ready\r\n    })(jQuery); \/\/ end of jQuery name space\r\n<\/script><\/pre>\n
    We also need to create a new css file ‘style.css’ in \/public\/css\/ to style the error messages:<\/p>\n
    .input-field div.error {\r\n    position: relative;\r\n    top: -1rem;\r\n    left: 0rem;\r\n    font-size: 0.8rem;\r\n    color: #FF4081;\r\n    margin-left: 3rem;    \r\n    -webkit-transform: translateY(0%);\r\n    -ms-transform: translateY(0%);\r\n    -o-transform: translateY(0%);\r\n    transform: translateY(0%);\r\n}<\/pre>\n
    Don’t forget to link the css in \/resources\/views\/layouts\/index.blade.php<\/p>\n
    ...\r\n<link rel=\"stylesheet\" href=\"{{asset('css\/materialize.min.css')}}\">\r\n<link rel=\"stylesheet\" href=\"{{asset('css\/style.css')}}\">\r\n...<\/pre>\n
    Here is the result (http:\/\/localhost:8000\/login)\"crud-materializecss-login-error\"<\/a>To find out the materialize icons, see\u00a0https:\/\/material.io\/icons\/<\/a>.\u00a0 Note: the naming for displaying the icon for materialize css is pretty tricky. For example to show icon for name\/username like ‘account box’, we have to write it with underscore (_). so it should be ‘account_box’:<\/p>\n
    <i class=\"small material-icons prefix\">account_box<\/i><\/pre>\n
     <\/li>\n
  25. Do the same for ‘Register’ link.
    \nHere is the modification for \/resources\/views\/auth\/register.blade.php<\/p>\n
    @extends('layouts.index')\r\n\r\n@section('content')\r\n<div class=\"section\">\r\n    <div class=\"card-panel purple darken-3 white-text\">Register<\/div>\r\n<\/div>\r\n<div class=\"section\">\r\n    <form id=\"formValidate\" action=\"{{ url('\/register') }}\" method=\"POST\">\r\n        {{ csrf_field() }}\r\n        <div class=\"row {{ $errors->has('name') ? ' has-error' : '' }}\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">account_box<\/i>\r\n                <input id=\"name\" type=\"text\" class=\"validate\" name=\"name\" value=\"{{ old('name') }}\" data-error=\".errorName\" required>\r\n                <label for=\"name\">Name<\/label>\r\n                <div class=\"errorName\">\r\n                @if ($errors->has('name'))\r\n                    <div class=\"error\">{{ $errors->first('name') }}<\/div>\r\n                @endif\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row {{ $errors->has('email') ? ' has-error' : '' }}\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">email<\/i>\r\n                <input id=\"email\" type=\"email\" class=\"validate\" name=\"email\" value=\"{{ old('email') }}\" data-error=\".errorEmail\" required>\r\n                <label for=\"email\">E-Mail Address<\/label>\r\n                <div class=\"errorEmail\">\r\n                @if ($errors->has('email'))\r\n                    <div class=\"error\">{{ $errors->first('email') }}<\/div>\r\n                @endif\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row {{ $errors->has('password') ? ' has-error' : '' }}\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">lock_outline<\/i>\r\n                <input id=\"password\" type=\"password\" class=\"validate\" name=\"password\" data-error=\".errorPassword\" required>\r\n                <label for=\"password\">Password<\/label>\r\n                <div class=\"errorPassword\">\r\n                @if ($errors->has('password'))\r\n                    <div class=\"error\">{{ $errors->first('password') }}<\/div>\r\n                @endif\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <i class=\"small material-icons prefix\">lock_outline<\/i>\r\n                <input id=\"password-confirm\" type=\"password\" class=\"validate\" name=\"password_confirmation\" data-error=\".errorPasswordConfirmation\" required>\r\n                <label for=\"password\">Confirm Password<\/label>\r\n                <div class=\"errorPasswordConfirmation\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"row\">\r\n            <div class=\"input-field col s6 push-s3\">\r\n                <button type=\"submit\" class=\"btn btn-flat pink accent-3 waves-effect waves-light white-text\">Register <i class=\"material-icons right\">send<\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/form>\r\n<\/div>\r\n@endsection<\/pre>\n
    Here is the looks\"crud-materializecss-auth-reg\"<\/a>We need to modify a few things like the page redirection after the log in and the register. I also notice the dropdown menu to show the logged in user still not correct. For modifying the redirection page, it’s simple. Modify the controllers (LoginController.php and RegisterController.php) in \/app\/Http\/Controllers\/Auth\/ directory. Set $redirectTo variable to the homepage (‘\/’) instead of ‘\/home’ like this:<\/p>\n
    \/\/protected $redirectTo = '\/home';\r\nprotected $redirectTo = '\/';<\/pre>\n
    Then for the dropdown menu, we need to modify \/resources\/views\/layouts\/header.blade.php like this:<\/p>\n
    <nav class=\"pink accent-3\" role=\"navigation\">\r\n    <div class=\"nav-wrapper container\">\r\n        <div class=\"col s12\">\r\n        <a id=\"logo-container\" href=\"#\" class=\"brand-logo\">Laravel<\/a>\r\n        <ul class=\"right hide-on-med-and-down\">\r\n            <li><a href=\"{{ url('\/')}}\">Home<\/a><\/li>\r\n            <!-- Authentication Links -->\r\n            @if (Auth::guest())\r\n                <li><a href=\"{{ url('\/login') }}\">Login<\/a><\/li>\r\n                <li><a href=\"{{ url('\/register') }}\">Register<\/a><\/li>\r\n            @else\r\n                <li>\r\n                    <a href=\"#\" class=\"dropdown-button\" data-beloworigin=\"true\" data-activates=\"dropdown1\">\r\n                        {{ Auth::user()->name }} <i class=\"small material-icons prefix right\">arrow_drop_down<\/i>\r\n                    <\/a>\r\n\r\n                    <ul id=\"dropdown1\" class=\"dropdown-content pink accent-3\">\r\n                        <li>\r\n                            <a href=\"{{ url('\/logout') }}\"\r\n                                onclick=\"event.preventDefault();\r\n                                         document.getElementById('logout-form').submit();\">\r\n                                Logout\r\n                            <\/a>\r\n\r\n                            <form id=\"logout-form\" action=\"{{ url('\/logout') }}\" method=\"POST\" style=\"display: none;\">\r\n                                {{ csrf_field() }}\r\n                            <\/form>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/li>\r\n            @endif\r\n        <\/ul>\r\n\r\n        <ul id=\"nav-mobile\" class=\"side-nav\">\r\n            <li><a href=\"{{ url('\/')}}\">Home<\/a><\/li>\r\n        <\/ul>\r\n        <a href=\"#\" data-activates=\"nav-mobile\" class=\"button-collapse\"><i class=\"material-icons\">menu<\/i><\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/nav><\/pre>\n
    To find out the complete dropdown function for materialized css, please see http:\/\/materializecss.com\/dropdown.html<\/a> and http:\/\/demo.geekslabs.com\/materialize\/v3.1\/ui-navbar.html<\/a>.
    \nI also need to make a slightly modification in \/public\/css\/style.css to make the dropdown display the correct font color:<\/p>\n
    .dropdown-content li>a, .dropdown-content li>span {\r\n    color: #ffffff;\r\n}<\/pre>\n
    Here is the looks:\"crud-materializecss-dropdown\"<\/a><\/li>\n
  26. Now, we want to restrict some functions like ‘Add’, ‘Edit’ and ‘Delete’ can only be proceeded when the user is logged in. So we’re going to check the logged in user (‘Auth::check()’) in \/app\/Http\/Controllers\/CrudController.php for some functions ‘create’, ‘edit’ and ‘destroy’ like this: (ref:\u00a0Authentication<\/a> and Check if user is logged in<\/a>):\n
    ...\r\npublic function create()\r\n{\r\n    if(Auth::check()){\r\n        return view('add');\r\n    }else{\r\n        return redirect()->to('\/login');\r\n    }\r\n}\r\n...\r\npublic function edit($id)\r\n{\r\n    if(Auth::check()){\r\n        \/\/$data=Crud::find($id); \/\/SAME WITH BELOW\r\n        $data=Crud::where('id',$id)->first();\r\n        return view('edit')->with('data',$data);\r\n    }else{\r\n        return redirect()->to('\/login');\r\n    }\r\n}\r\n...\r\npublic function destroy($id)\r\n{\r\n    if(Auth::check()){\r\n        $delete=Crud::find($id);\r\n        $delete->delete(); \r\n        \r\n        return redirect()->to('\/');\r\n    }else{\r\n        return redirect()->to('\/login');\r\n    }\r\n}\r\n<\/pre>\n
    OK. When we click the Add, edit and delete icon\/buttons, it’d redirect us to the login page if we haven’t logged in!
    \nNEXT: User access\/level, go to \/ proceed to the aim page after logging in, admin panel and comments!<\/li>\n
  27. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Source: Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part I & Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part II MaterializeCSS source: http:\/\/materializecss.com\/getting-started.html (I don’t use sass, so download the newest version http:\/\/materializecss.com\/bin\/materialize-v0.97.7.zip) Create a new laravel project named ‘crud-materialize’ teddy@teddy-K43SJ:~\/Documents\/works\/laravel$ composer create-project –prefer-dist laravel\/laravel crud-materialize Installing laravel\/laravel (v5.3.16) – Installing laravel\/laravel (v5.3.16) Loading from … Continue reading “Laravel CRUD With MaterializeCSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-832","post","type-post","status-publish","format-standard","hentry","category-laravel","category-tutorial"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":27,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/832\/revisions\/910"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}