Month: October 2016

Laravel CRUD With MaterializeCSS

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)

  1. Create a new laravel project named ‘crud-materialize’

     
  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 extractingmaterializeOnly 3 folders (css, fonts and js) and 2 files.
    Then 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.
  3. Go into the project directory ‘crud-materialize’ then create a controller with name ‘CrudController’

    We can look up the new file CrudController.php in /app/Http/Controllers/ directory.
  4. Modify CrudController.php then edit ‘index’ function to call our view. It’d be like this:

     
  5. Modify /routes/web.php to change the default route (welcome) to call index function in CrudController:
  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/:
    /resources/views/layouts/index.blade.php:

    /resources/views/layouts/header.blade.php:

    /resources/views/show.blade.php:

     
  7. Turn on the server (‘php artisan serve’) and see the look (http://localhost:8000/)crud-laravel-materializecss
  8. Setting database! Modify .env file in /crud-materialize/ directory to set the database setting:

    Now we’re not going to use phpmyadmin to create the database. We’ll do it by ‘php artisan migrate’ command 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.
  9. Create a new table ‘crud’

    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.
  10. Edit 2016_10_29_030815_create_crud_table.php to add two more fields (‘title’ and ‘content’).
    Defaultly, there are two fields available in the file, they are ‘id’ and timestamps. Just insert the above two more fields between them
  11. Migrate (push) the tables to our database

    Check those tables in ‘crud-materialize’ database.
  12. Create a new model ‘Crud’

    Check a new file ‘Crud.php’ in /app/ directory!
  13. Modify Crud.php like this:

    Then create a new data in ‘crud’ table via phpmyadmin:
    ‘title’: ‘Title 1’
    ‘content’: ‘Content 1 Content 1 Content 1 Content 1 Content 1’
  14. Retrieve the new data through CrudController

    We’ll throw the ‘data’ into our view ‘show’.
  15. Modify show.blade.php in /resources/views/ to get and show the data from CrudController above

    We use ‘foreach’ loop, so just use one ‘row’ class and remove the others two.
  16. Test!crud-materializecss-show
  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’:

    Then create a new route for this in /routes/web.app:

    Create a new blade file ‘add.blade.php’ in /resources/views/ to show the form:

    In ‘show.blade.php’ we can add an url to ‘add’ route when anyone click the ‘add’ button:

    OK. Here is the add form when we click the add (+) button (http://localhost:8000/add)crud-materializecss-addNow 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):

    Then modify ‘store’ function in /app/Http/Controllers/CrudController.php to validate and store the form:

    OK. Try to add a new data (http://localhost:8000/add)crud-materializecss-add-dataHere is the resultcrud-materializecss-show-data
  18. Show individual data. We want to show the data if anyone click ‘Readmore’ button.
    Add a new route ‘read’ that need ‘id’ parameter in /routes/web.app:

    Apply the route at ‘Readmore’ link in /resources/views/show.blade.php:

    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’:

    Create a new blade file ‘showdata.blade.php’ in /resources/views/ like this:

    OK. Test it by clicking ‘Readmore’ or directly by url like http://localhost:8000/read/2crud-materializecss-show-data-idI added a new ‘Back’ button. please see the complete materialize icon. Click ‘Back’ button to redirect back to the homepage.
  19. Pagination. To show the pagination,  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:

    To show the pagination counter and the pages, modify /resources/views/show.blade.php to add ‘{{$data->render()}}’ just before @endsection:

    Here is the result (the url would be like http://localhost:8000/?page=1):crud-materializecss-pagination
  20. Edit data.
    Create two new routes in /routes/web.php. the first to edit the data and the last to update the changes:

    Modify ‘edit’ and ‘update’ function in /app/Http/Controllers/CrudController.php:

    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:

    Dont forget to modify ‘Edit’ button/link in ‘show.blade.php’ to add the ‘edit’ route:

     
  21. Delete data.
    Create a new route ‘delete’ in /routes/web.php:

    Then modify ‘destroy’ function in /app/Http/Controllers/CrudController.php to delete the data:

    Modify ‘Delete’ button/link in /resources/views/show.blade.php to apply the delete route and give javascript confirmation about the deletion:

    FINISH!
    NEXT: Add User authentication and comment section!
  22. User Authentication.
    Use default scaffolding ‘auth’

    Like I said before, it’ll create user authentication (login, register, password, etc) automatically. Please check the views in /resources/views/auth/ directory!
    Also check the routes in /routes/web.php. It’ll create two new routes:

    About this route ‘Auth::routes()’, from http://stackoverflow.com/questions/39196968/laravel-5-3-new-authroutes/39197278#39197278, it said

    More read https://laracasts.com/discuss/channels/laravel/laravel-53-routing-as-authroutes?page=1.
  23. Modify /resources/views/layouts/header.blade.php, to add new links ‘login’ and ‘register’:

    Here is the lookscrud-materializecss-authClick ‘Login’ link, it’d display the login page. But we can see the layout (header, color, etc) is different with our homepage.
  24. Edit /resources/views/auth/login.blade.php.
    Replace 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-loginModify 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() }}

    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 Forms Validation to learn more about the validation form for materialize css.

    We also need to create a new css file ‘style.css’ in /public/css/ to style the error messages:

    Don’t forget to link the css in /resources/views/layouts/index.blade.php

    Here is the result (http://localhost:8000/login)crud-materializecss-login-errorTo find out the materialize icons, see https://material.io/icons/.  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’:

     
  25. Do the same for ‘Register’ link.
    Here is the modification for /resources/views/auth/register.blade.php

    Here is the lookscrud-materializecss-auth-regWe 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:

    Then for the dropdown menu, we need to modify /resources/views/layouts/header.blade.php like this:

    To find out the complete dropdown function for materialized css, please see http://materializecss.com/dropdown.html and http://demo.geekslabs.com/materialize/v3.1/ui-navbar.html.
    I also need to make a slightly modification in /public/css/style.css to make the dropdown display the correct font color:

    Here is the looks:crud-materializecss-dropdown
  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: Authentication and Check if user is logged in):

    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!
    NEXT: User access/level, go to / proceed to the aim page after logging in, admin panel and comments!

Fast CRUD With Laravel 5

Source: https://gilacoding.com/read/membuat-crud-laravel-hanya-dengan-5-menit

  1. Create a new laravel project named ‘latihan-crud’
    Type this command: composer create-project –prefer-dist laravel/laravel latihan-crud

     
  2. Modify .env file in /laravel/latihan-crud/ directory  to set the database setting:
  3. Create the new database ‘latihan-crud’ on phpmyadmin
  4. Install new package ‘crud-generator’ from ‘appzcoder’: composer require appzcoder/crud-generator
    DONT FORGET TO GO INTO ‘latihan-crud’ DIRECTORY FIRST!

    Look up ‘appzcoder’ directory in /latihan-crud/vendor/
  5. Add the new package ‘Appzcoder\CrudGenerator\CrudGeneratorServiceProvider::class’ in /config/app.php in ‘providers’

     
  6. Install another package ‘laravelcollective/html’

    Then do the same with #5 to add the new package ‘Collective\Html\HtmlServiceProvider::class,’ in /config/app.php in ‘providers’:

     
  7. In the same file (app.php), add the new facades ‘Form’ and ‘HTML’ (????) in ‘aliases’ section:
  8. Do ‘composer update’ to update the dependencies
  9. Then publish our files and setting
  10. Create a new class ‘Posts’ for our crud generator with two fields ‘title’ and
    <OLD>

    BUT I GOT THIS ERROR:

    </OLD
    <NEW>
    From this https://packagist.org/packages/appzcoder/crud-generator, I found the source of the error, I supposed to use ‘;’ (“title#string; body#text”) instead of ‘,’ (“title#string, body#text”) between the fields like this (DONT USE THIS COMMAND. THIS IS ONLY JUST A CORRECT COMMAND)

    USE THIS COMMAND INSTEAD TO MAKE IT CONSISTENT WITH THE ORIGINAL TUTORIAL:

    </NEW>
    The script for the table migration would be exist in /database/migrations/ directory (IF YOU FIND MORE THAN ONE SCRIPT WITH SAME TABLE ‘Posts’ LIKE ‘2016_10_22_081014_create_posts_table.php’ AND ‘2016_10_22_074719_create_posts_table.php’, PLS REMOVE THE OLD ONE FIRST! OR WE’D GET THIS ERROR: “Cannot declare class CreatePostsTable, because the name is already in use”)
  11. Push the table script to our database with ‘php artisan migrate’

    Check our database to make sure the new table ‘posts’ is already created! SOMEHOW THE OTHERS TABLES ‘migrations’, ‘users’ AND ‘password_resets’ ARE CREATED ALSO!
  12. Test on the browser. Start the server: ‘php artisan serve’ then open on our browser : http://localhost:8000/ –> It shows the laravel welcome page!
    Remember, A new route ‘posts’ is already created automatically from previous step, so to see the CRUD in action, pls go to http://localhost:8000/postsposts
  13. Add new data.
    Click the ‘+’ blue icon create-newthen fill the form with the fields ‘Title’ and ‘Body’. Then press ‘Create’ Buttonnew-postBut I got this error:

    I found the solution! In ‘Post’ class in /app/Post.php, at ‘$fillable’ variable, It’s only has ‘title’ field But there is no ‘body’ field!

    So add ‘body’ field like this:

    Then repeat the creation of new data! Here is the expected resultpostsMembuat Login Laravel 5 2 dengan username dan Hak akses
  14. At the right top of the page, there are two links ‘login’ and ‘register’ but none of them are working. To make them work, we need to create the authentication to create users like this: php artisan make:auth

    Dont forget to stop the server first by clicking CTRL+C!
    The above command would create some views for login, register, password, etc. Please check them in /resources/views/auth/ directory!
    This also create automatically a few new routes in /routes/web.php
  15. Now we can try them on our browser
    Remember, we dont need to create/migrate the user table because we already did this at the previous step (#11) when we did the first migration!
    Now the links ‘login’ and ‘register’ are working!
    Here is the register page: http://localhost:8000/registerregisterI use password: satria. Successful registration would be redirected to http://localhost:8000/homelogged-inThe links ‘login’ and ‘register’ also be showed up on the initial page http://localhost:8000/
  16. Change/set default route ‘/’
    In /routes/web.php, the default route for http://localhost:8000/ would go to the welcome page in /resources/views/welcome.blade.php. Here is the default route

    We want to change it to go to our login page! We have the login page in /resources/views/auth/login.blade.php. So here is the modified route

    Now each our homepage http://localhost:8000/ is opened, it’d open the login page!
    If we want to set the default route to the post page, please modify /routes/web.php like this:

    Now, if we open http://localhost:8000/, it’d show the list of the post page!
    LEARN ALSO THIS:
    Laravel Admin Panel
    An admin panel for managing users, roles, permissions & crud.