Showing posts with label Laravel. Show all posts
Showing posts with label Laravel. Show all posts

Monday, April 22, 2019

Cara Membuat Google Chart/Grafik Responsive



Pada postingan kali ini kita akan membahas lanjutan dari google chart/grafik yang sudah saya posting sebelumnya. Kalau kalian belum lihat bagaimana cara membuat google chartnya, bisa kalian lihat pada postingan saya sebelumnya disini.


Dipostingan sebelumnya, saya menulis tentang membuat chart/grafik tanpa menggunakan package tambahan untuk laravelya. Namun dalam hal tersebut memiliki masalah tentang responsive nya. Grafik yang disediakan oleh google belum responsive, untuk itu kita perlu menambahkan fungsi tambahan agar grafik yang kita sediakan responsive sesuai dengan device yang kita gunakan saat ini.

Contoh grafik yang tidak responsive.

Full page

Setelah dikecilkan

Lalu bagaimana kita akan melakukannya ?

Kita harus menambahkan function windows nya agar javascript yang dijalankan berdasarkan besar nya layar yang tampil. Cara nya mudah sekali, tinggal masukkan function berikut ini :


 $(window).resize(function(){
      drawVisualization(); //Function chart
      });

Tulis function tersebut sebelum </script>.

Fungsi chart drawVisualization() disana merupakan function chart pada code google chart ini,


Alhasil, grafik akan menjadi responsive.

Friday, April 12, 2019

Membuat Stopwatch dengan JavaScript di Laravel

Kali ini kita akan mencoba membuat stopwatch dengan javascript yang mana akan kita gunakan untuk mencatat waktu tertentu.



Membuat Stopwatch dengan JavaScript di Laravel

Skrip yang disajikan dalam halaman ini adalah kronometer / stopwatch sederhana , dengan opsi Mulai, Berhenti, dan Atur Ulang. Ini menampilkan sepersepuluh detik, detik, dan menit, dan dapat diatur untuk berhenti dan menjalankan fungsi ketika waktu kronometer mencapai nilai tertentu.
- Untuk lebih jelasnya, lihat instruksi di bawah, dan komentar dalam kode.

Untuk menguji skrip ini, klik tombol Mulai. Dalam contoh ini, kronometer diatur untuk berhenti secara otomatis dan menampilkan jendela peringatan setelah 3 detik dan 8/10 detik.

- Fungsi startChr () memulai kronometer.
- Untuk menghentikan stopwatch, panggil fungsi stopChr () .
- Untuk mengatur ulang kronometer, panggil fungsi resetChr () .

<div class="form-group">
<label class="control-label col-md-1 text-bold">Durasi</label>
<div class="col-md-4">
 <input id="durasi" type="text" name="duration" required class="form-control">
</div>

</div>

<div id="showtm" style="font-size:21px; font-weight:800;">0:0</div>
<a onclick="startChr()" class="btn btn-primary">Start</a>
<a onclick="stopChr()" class="btn btn-danger">Stop</a>
<a onclick="resetChr()" class="btn btn-info">Reset</a><br><br><br>

Script functionnya...
<script type="text/javascript"><!--
// chronometer / stopwatch JS script - coursesweb.net

// Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
// If all these values are set to 0, the chronometer not stop automatically
var stmints = 0;
var stseconds = 0;
var stzecsec = 0;

// function to be executed when the chronometer stops
function toAutoStop() {
  alert('Your life goes on');
}

// the initial tenths-of-second, seconds, and minutes
var zecsec = 0;
var seconds = 0;
var mints = 0;

var startchron = 0;

function chronometer() {
  if(startchron == 1) {
    zecsec += 1;       // set tenths of a second

    // set seconds
    if(zecsec > 9) {
      zecsec = 0;
      seconds += 1;
    }

    // set minutes
    if(seconds > 59) {
      seconds = 0;
      mints += 1;
    }

    // adds data in #showtm
    document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';

    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
    if(zecsec == stzecsec && seconds == stseconds && mints == stmints) toAutoStop();
    else setTimeout("chronometer()", 100);
  }
}

function startChr() { startchron = 1; chronometer(); }      // starts the chronometer
function stopChr() { startchron = 0;

if(mints === 0)
{
document.getElementById('durasi').value = seconds +' Detik ' ;
}
else{
document.getElementById('durasi').value = mints+ ' Menit '+ seconds +' Detik ' ;
}

 }                      // stops the chronometer
function resetChr() {
  zecsec = 0;  seconds = 0; mints = 0; startchron = 0;
  document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';
}

// start the chronometer, delete this line if you want to not automatically start the stopwatch
startChr();
--></script>

Tuesday, March 12, 2019

Laravel CRUD dengan AJAX hanya 5 Menit

Bismillahirrahmanirrahim...

Kalau biasanya kita menggunakan laravel murni untuk ngoding, kali ini kita akan belajar bagaimana kita menggunakan ajax pada laravel. Tentu kita akan berfikir kenapa kita menggunakan Ajax ? apa itu AJAX ? kapan harus digunakan ?



Ya, tentu saja pikiran itu pasti muncul ketika disuguhkan dengan sesuatu yang baru apalagi sesuatu tersebut berhubungan dengan yang sedang kita lakukan atau kerjakan. Tapi jangan khawatir kita akan membahas nya satu persatu. Pertama kita kenalan apa itu AJAX.

AJAX adalah singkatan dari Asynchronous Javascript and XMLHTTP, yaitu merupakan suatu teknik pemograman berbasis web untuk menciptakan suatu web yang interaktif. 

Kenapa kita harus menggunakan AJAX ? Misalkan anda mempunyai 1000 data pada aplikasi anda dan ketika anda ingin menambahkan 1 data baru, maka AJAX tidak akan melakukan reload pada halaman web yang menyebabkan 1000 data juga akan ikut ter-reload. Tentu hal ini akan memberatkan aplikasi dan data paket yang lewat. Disini lah fungsi AJAX agar ketika ada fungsi dilakukan di tidak melakukan refresh terhadap halaman tersebut, tapi hanya pada data baru tersebut.

Tertarik ? Ayo kita belajar bagaimana CRUD Laravel dengan menggunakan AJAX....

Download terlebih dahulu js.app yang akan kita gunakan di bit.ly/idstack-asset-laravelajax. Lalu pindahkan pada folder public. Jangan Lupa untuk menghapus isi dari app.css pada folder public bawaan laravel karena kita akan menggunakan yang dari kita download.

Sebelum melakukan CRUD kita akan mendownload Package yang diperlukan Laravel untuk support ajax nya terlebih dahulu yaitu

Composer.json
        "laravelcollective/html": "^5.7.0",
        "yajra/laravel-datatables-oracle": "~8.0"

config/app.php
 //Provider
 Collective\Html\HtmlServiceProvider::class,
 Yajra\DataTables\DataTablesServiceProvider::class,

//Aliases
 'Form' => Collective\Html\FormFacade::class,
 'Html' => Collective\Html\HtmlFacade::class,
 'DataTables' => Yajra\DataTables\Facades\DataTables::class,


Jika sudah mendownload,  selanjutnya kita akan membuat tabel user terlebih dahulu. Berikut ini pada migration table user.

create_users_table.php
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}


Selanjutnya kita akan buat layout yang akan kita gunakan.

resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Laravel AJAX CRUD with Server Side Validation by IDStack">
    <meta name="author" content="IDStack">
    {{-- CSRF TOKEN --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="icon" href="{{ asset('assets/img/favicon.ico') }}">

    <title>Laravel AJAX CRUD Server Side Validation</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- Datatables -->
    <link href="{{ asset('assets/vendor/datatables/datatables.min.css') }}" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="{{ asset('assets/vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{{ asset('assets/css/ie10-viewport-bug-workaround.css') }}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{ asset('assets/css/navbar-fixed-top.css') }}" rel="stylesheet">

    <!-- Custom styles for laravel -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    @stack('styles')

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{{ asset('assets/js/ie-emulation-modes-warning.js') }}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Larajax</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class=""><a href="{{ route('user.index') }}">User</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

    @yield('content')

    </div> <!-- /container -->

    @include('layout._modal')

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.min.js') }}"></script>

    <!-- Datatables -->
    <script src="{{ asset('assets/vendor/datatables/datatables.min.js') }}"></script>

    <!-- Sweetalert2 -->
    <script src="{{ asset('assets/vendor/sweetalert2/sweetalert2.all.min.js') }}"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ asset('assets/js/ie10-viewport-bug-workaround.js') }}"></script>


    <script src="{{ asset('js/app.js') }}"></script>

    @stack('scripts')
  </body>
</html>

resources/views/layouts/_action.blade.php
<a href="{{ $url_show }}" class="btn-show" title="Detail: {{ $model->name }}"><i class="icon-eye-open text-primary" ></i></a> |

<a href="{{ $url_edit }}" class="modal-show edit" title="Edit {{ $model->name }}"><i class="icon-pencil text-inverse"></i></a> |

<a href="{{ $url_destroy }}" class="btn-delete" title="{{ $model->name }}"><i class="icon-trash text-danger"></i></a> 

resources/views/layouts/_modal.blade.php
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-title">Form Input</h4>
            </div>

            <div class="modal-body" id="modal-body">
            </div>

            <div class="modal-footer" id="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="modal-btn-save">Save changes</button>
            </div>
        </div>
    </div>
</div> 

welcome.blade.php
@extends('layout.app')

@section('content')
<div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>To see the difference between static and fixed top navbars, just scroll.</p>
    <p>
        <a class="btn btn-lg btn-primary" href="#navbar" role="button">View navbar docs »</a>
    </p>
</div>
@endsection 

Kita akan buat seeder untuk mengisi data random dari laravel sehingga kita memiliki data yang banyak. Dengan perintah php artisan make:seeder UsersTableSeeder

UsersTableSeeder.php
<?php

use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\User::class, 100)->create();
    }
}


DatabaseSeeder.php
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(UsersTableSeeder::class);
    }
}

Lakukan perintah migrate dengan perintah php artisan make:migrate --seed

Selanjutnya adalah membuat controller dengan perintah php artisan make:controller UserController --resource

UserController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;
use DataTables;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('pages.users.index');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $model = new User();
        return view('pages.users.form', compact('model'));
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
          //
        $this->validate($request, [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users,email'
        ]);
        $model = User::create($request->all());
        return $model;
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $model = User::findOrFail($id);
        return view('pages.users.show', compact('model'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
         $model = User::findOrFail($id);
        return view('pages.users.form', compact('model'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users,email,' . $id
        ]);
        $model = User::findOrFail($id);
        $model->update($request->all());
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $model = User::findOrFail($id);
        $model->delete();
        // User::destroy($id);
    }

    public function dataTable()
    {
        $model = User::query();
        return DataTables::of($model)
            ->addColumn('action', function ($model){
                return view('layout._action', [
                    'model' => $model,
                    'url_show' => route('user.show', $model->id),
                    'url_edit' => route('user.edit', $model->id),
                    'url_destroy' => route('user.destroy', $model->id),
                ]);
            })
            ->addIndexColumn()
            ->rawColumns(['action'])
            ->make(true);
    }
}


routes/web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::resource('/user', 'UserController');

Route::get('/table/user', 'UserController@dataTable')->name('table.user');

public/js/app.js
 
$('body').on('click', '.modal-show', function (event) {
    event.preventDefault();

    var me = $(this),
        url = me.attr('href'),
        title = me.attr('title');

    $('#modal-title').text(title);
    $('#modal-btn-save').text(me.hasClass('edit') ? 'Update' : 'Create');

    $.ajax({
        url: url,
        dataType: 'html',
        success: function (response) {
            $('#modal-body').html(response);
        }
    });

    $('#modal').modal('show');
});

$('#modal-btn-save').click(function (event) {
    event.preventDefault();

    var form = $('#modal-body form'),
        url = form.attr('action'),
        method = $('input[name=_method]').val() == undefined ? 'POST' : 'PUT';

    form.find('.help-block').remove();
    form.find('.form-group').removeClass('has-error');

    $.ajax({
        url : url,
        method: method,
        data : form.serialize(),
        success: function (response) {
            form.trigger('reset');
            $('#modal').modal('hide');
            $('#datatable').DataTable().ajax.reload();

            swal({
                type : 'success',
                title : 'Success!',
                text : 'Data has been saved!'
            });
        },
        error : function (xhr) {
            var res = xhr.responseJSON;
            if ($.isEmptyObject(res) == false) {
                $.each(res.errors, function (key, value) {
                    $('#' + key)
                        .closest('.form-group')
                        .addClass('has-error')
                        .append('<span class="help-block"><strong>' + value + '</strong></span>');
                });
            }
        }
    })
});

$('body').on('click', '.btn-delete', function (event) {
    event.preventDefault();

    var me = $(this),
        url = me.attr('href'),
        title = me.attr('title'),
        csrf_token = $('meta[name="csrf-token"]').attr('content');

    swal({
        title: 'Are you sure want to delete ' + title + ' ?',
        text: 'You won\'t be able to revert this!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    '_method': 'DELETE',
                    '_token': csrf_token
                },
                success: function (response) {
                    $('#datatable').DataTable().ajax.reload();
                    swal({
                        type: 'success',
                        title: 'Success!',
                        text: 'Data has been deleted!'
                    });
                },
                error: function (xhr) {
                error: function (xhr) {
                    swal({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Something went wrong!'
                    });
                }
            });
        }
    });
};

view/form.blade.php
{!! Form::model($model, [
    'route' => $model->exists ? ['user.update', $model->id] : 'user.store',
    'method' => $model->exists ? 'PUT' : 'POST'
]) !!}

    <div class="form-group">
        <label for="" class="control-label">Name</label>
        {!! Form::text('name', null, ['class' => 'form-control', 'id' => 'name']) !!}
    </div>

    <div class="form-group">
        <label for="" class="control-label">E-Mail</label>
        {!! Form::email('email', null, ['class' => 'form-control', 'id' => 'email']) !!}
    </div>

{!! Form::close() !!} 

view/index.blade.php
@extends('layout.app')

@section('content')
<div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Datatable
          <a href="{{route('user.create')}}" class="btn btn-success pull-right modal-show" style="margin-top: -8px;" title="Create User"><i class="icon-plus"></i> Create</a>
      </h3>
    </div>
    <div class="panel-body">
          <table id="datatable" class="table table-hover" style="width:100%">
              <thead>
                  <tr>
                      <th>No</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th></th>
                  </tr>
              </thead>
              <tbody>

              </tbody>
             
          </table>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: "{{ route('table.user') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'action', name: 'action'}
            ]
        });
    </script>
@endpush 

view/show.blade.php
<table class="table table-hover">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>{{ $model->id }}</td>
        <td>{{ $model->name }}</td>
        <td>{{ $model->email }}</td>
    </tr>
</table>

Saturday, December 15, 2018

Membuat Multi Level User Login Laravel



Membuat Multi Level User Login Laravel

Pada postingan kali ini saya akan membahas mengenai multi auth user, dimana kita bisa melakukan login dan masuk pada halaman berdasarkan role user kita. Sehingga halaman yang diperoleh oleh user susuai dengan role user itu sendiri. Multi auth disini artinya authentication yang lebih dari atau sama dengan 2. Membuat multi level user login pada laravel sebenarnya sangatlah mudah, kita hanya perlu memanfaatkan fungsi dari middleware dan tinggal atur saja role user nya.

Kenapa saya katakan mudah untuk membuat multi level user login di laravel ini, karena pada default laravel ini sudah menyediakan yang namanya sistem authentikasi sehingga kita tinggal jalankan satu perintah dan user akan dibuatkan secara otomatis.

php aritisan make:auth

Cukup dengan perintah diatas kita telah membuat user yang dibuat oleh laravel sehingga kita tinggal melakukan pengeditan saja pada user nya dengan menambahkan colom role atau level pada migration laravel.

Jika sudah melakukan diatas, selanjutnya untuk membuat multi level user login di laravel kita membutuhkan yang nama nya middleware. Apa itu middleware ?


Setelah membuat middlware kita akan mengatur pada model user nya dengan menambahkan function baru nya seperti berikut.

Model User
Untuk membuat multi level user login di laravel, tambahkan 2 function berikut ini untuk melakukan proses penyeleksian user nya nanti. Apakah dia login dengan role admin atau user, atau lainnya.

Selanjutnya kita akan mengatur pada middleware nya, 

Middleware

Untuk role user biasa diarahkan pada $next($request) dimana sudah saya arahkan secara default ketika login atau register.

Untuk role admin akan diarahkan pada route /progja , dimana admin dapat melihat data dan melakukan CRUD pada data tersebut.

Atau tidak keduanya, artinya user adalah superadmin yang akan diarahkan ke route /chart dimana  superadmin bisa melihat grafik data dan melakukan export data.

Kernel
Selanjutnya kita lakukan pendaftaran middleware pada kernel.php, dimana kita akan memanggil user untuk menggunakan middleware yang sudah kita buat tadi.

Langkah terkahir untuk membuat multi level user login di laravel adalah deklarasinya pada route.

Route
Kita akan melakukan autentikasi ketika user akan memasukan route tersebut.

Itulah tadi cara membuat multi level user login di laravel....


#SyntaxError
#1000JurusAkanKalahDengan1JurusyangDilatih1000Kali

Sunday, December 2, 2018

Cara Cepat Membuat PDF di Laravel


Cara Eksport ke PDF di Laravel -

Pada postingan kali ini saya akan membahas bagaimana caranya untuk membuat pdf di laravel, atau kita mengekspor data ke dalam bentuk PDF. Ada banyak cara untuk mengekpor data di PDF, salah satunya yang akan kita gunakan kali ini adalah dengan menggunakan package TCPDF. Sama seperti package lainnya, TCpdf ini berfungsi untuk mengekspor data yang ada pada web kita yang kemudian dapat kita jadikan sebuah tulisan berbentuk PDF.
TCPDF adalah kelas php untuk menghasilkan dokumen PDF tanpa memerlukan pustaka ekternal tambahan. TCPDF mendukung semua format halaman ISO dan format halaman kustom, margin dan satuan pengukuran, UTF-8 Unicode, bahasa RTL, HTML, barcode dan lainnya.

Adapun untuk membuat nya  terlebih dahulu kita memerlukan yang namanya package tcpdf.

composer.json

Berikut package yang digunakan. Letakkan package seperti biasa pada composer.json setelah itu ketikkan perintah pada cmd composer update dan tunggu proses nya hingga selesai.

Setelah selesai mendownload, kita akan mendaftarkan package tadi agar dapat digunakan pada config/app.


Providers
Aliases
Setelah mendaftarakan, kita akan menggunakan package tadi sesuai dengan nama aliases yang kita daftarkan. Untuk menggunakannya cukup ketikkan Use PDF pada controller.

controller
Setelah itu, pada controller nya akan kita buatkan syntax seperti dibawah ini.

view

Data yang akan kita keluarkan kita ambil dari table incomes, yang kemudian akan menjadi Rekap_income.pdf. Sebenarnya untuk syntax ini akan melihat terlbih dahulu preview pdf yang akan tampil. Entah kenapa saya coba pdf nya langsung terdownload.

Dan terakhir, kita tinggal buat view pada pdf nya. Pada pdf nya tinggal memasukkan table data seperti biasa saja kemudian nanti di keluarkan datanya dari controller yang dibawa.


<html>
    <head>
        <meta charset="utf-8">
        <title>Judul</title>
            <link href="{{asset('css_pdf/bootstrap.css')}}" rel="stylesheet">

    </head>
<body>
<h1> Rekapan Pemasukan </h1>
<table border="1px solid black" cellpadding="7">
    <thead>
        <tr style="text-align: center;">   
            <th style='width:"10%";margin: 10px;'><b>ID</b></th>
           <th style='width:"10%";margin: 10px;'><b> Nama</b> </th>
            <th style='width:"10%";margin: 10px;'> <b>Jumlah</b> </th>
            <th style='width:"10%";margin: 10px;'> <b>Tanggal</b> </th>
            <th style='width:"10%";margin: 10px;'> <b>Program </b></th>
            <th style='width:"10%";margin: 10px;'> <b>Keterangan </b></th>
        
        </tr>
        <!-- <td>Password</td> -->
    </thead>
    @foreach($incomes as $income)
    <tr style="text-align: center;">  
        <td style='width:"10%";margin: 10px;'>{{$income->id}}</td>
        <td style='width:"10%";margin: 10px;'>{{$income->nama}}</td>
        <td style='width:"10%";margin:10px;'>{{number_format($income->jumlah)}}</td>
        <td style='width:"10%";margin: 10px;'>{{$income->tanggal}}</td>
        <td style='width:"10%";margin: 10px;'>{{$income->progja->nama}}</td>   
           <td style='width:"10%";margin:10px;'>{{$income->ket}}</td>
    </tr>
    @endforeach
</table>
<p> <b> Total Pemasukan </b> : {{number_format($total)}}</p>
</body>
</html>

Itulah tadi cara membuat cepat membuat pdf di laravel..

Sunday, November 25, 2018

Cara Membuat Chart/Grafik di Laravel Tanpa Package

Cara Membuat Chart/Grafik di Laravel Tanpa Package


Pada postingan saya akan membagikan cara membuat Chart/grafik di laravel tanpa Package. Biasanya untuk membuat sebuah chart atau grafik di laravel menggunakan package ConsoleTvs yang paling populer. Biasanya untuk membuat sebuah chart/grafik di laravel kita harus mengikuti tutorial sesuai dengan aturan yang telah disediakan oleh package tersebut. Untuk cara membuat chart/grafik di laravel tanpa package ini sebenarnya sangat mudah, kita tinggal perlu meng-copy source code chart nya kemudian tinggal dibungkus dengan paket yang akan dibuat chart pada controller laravel.

Cara membuat chart/grafik di laravel ini sangat mudah karena kita tidak perlu menginstall sebuah package yang akan memakan waktu lama. Sebenarnya fungsi package pada laravel itu gunanya untuk memudahkan dalam pembuatan atau pengembangan software.  

Kali inisaya akan membuat chart/grafik di laravel menggunakan dokumentasi dari google developer chart atau kalia bisa klik disini Google Developers Appspot Chart.

Nah, pada dokumentasi google tersebut banyak code chart yang telah disediakan oleh google untuk tinggal kita pakai misalnya Bar chart, Line chart, pie chart, dan donut chart. Banyak sekali jenis chart yang bisa kita pakai pada laravel di google chart ini.

Cara menggunakan chart/grafik ini pada laravel sebagai berikut.

Pada Controller



Pada syntax diatas saya mencoba untuk mengeluarkan data dari database yang kemudian di groupby dan order by berdasarkan tanggal. Kemudian data yang sudah disiapkanakan dikirimkan ke blade.php yang nanti nya akan menampilkan chart/grafik nya.
Pada View


Tampilan pada viewnya, kita terlebih dahulu copy kan code chart dari google tadi yang ingin kita buatkan sebuah chart, kemudian pada bagian datanya, isikan data dari database yang sudah kita buat tadi pada controller. Pada kasus ini, saya akan menampilkan sebuah pemasukan dari sebuah komunitas berdasarkan tanggal dengan filter bulan saja. Dengan begitu kita menjadi lebih mudah melihat laporan pemasukan dari sebuah income. Sederhana sekali dan simple.


Itulah tadi bagaimana cara membuat chart/grafik di laravel tanpa package, walaupun ada kekurangan namun bisa kita jadikan alternatif jika tidak menggunakan package.

Saturday, November 10, 2018

Cara Mencegah Back Button Setelah Logout di Laravel

Cara Mencegah Back Button Setelah Logout di Laravel


Pada postingan kali ini kita akan membahas tentang back button pada laravel. Kenapa kita akan bahas ini ? mungkin kalian yang sedang mencari artikel ini atau menemukan artikel seperti judul diatas mengalami kejanggalan pada sistem authentikasi kalian. Sebelumnya kita akan bahas terlebih dahulu kenapa ini penting untuk kita ketahui dan kita gunakan.
Mungkin sebagian orang tidak sadar dengan keamanan sistem autentikasinya. Ya, tombol back button ini biasanya ketika kita ingin kembali pada halaman sebelumnya di posisi kita saat ini. Back button ini tentu saja sangat berguna, namun ketika kita tidak menggunakannya dengan bijak maka ini menjadi boomerang sendiri untuk kita.

Misalkan kita mempunyai sebuah website yang sedang kita bangun, kemudian kita mencoba login pada web dan setelah berhasil masuk, kita akan melihat tampilan yang harusnya tidak boleh dilihat oleh orang lain. Maksudnya hanya orang tertentu saja yang boleh melihat isi nya. Nah ketika kita mencoba untuk logout dan berhasil, coba kalian tekan back button pada browser kalian, apa yang terjadi ? 

Halaman akan tampil kembali pada saat kita belum logout tadi. Tentu saja ini sangat berbahaya untuk keamanan web kita. Untuk itu kita perlu mencegah back button ini agar ketika logout halaman tidak kembali pada saat kita login tadi.

Untuk cara mencegah back button ini jalan sebenarnya sangat mudah. Kita perlu melakukan yang namanya pencegahan cache atau menghapus history. Pertama yang kita perlukan adalah sebuah middleware.

Buat middleware baru pada project laravel kalian dengan nama custom. Untuk contoh ini saya buat namaya seperti ini.


Setelah itu kita akan mengedit middleware yang sudah kita buat tadi. Buka middleware yang baru tadi lalu ketikkan perintah sebagai berikut seperti yang terlihat pada gambar.


Ini adalah syntax yang gunanya untuk mereset cache yang kita gunakan, sehingga ketika kita logout kita seperti tidak punya history apa-apa pada web kita. Namun operasi yang dilakukan tetap ada pada web kita itu. Ketikkan persis seperti yang diatas syntaxnya. 

Setelah diedit, seperti biasanya ketika kita membuat sebuah middleware baru, kita akan mendaftarkannya pada kernel.php


Kita akan memberinya nama sesuai dengan nama middlewarenya tadi. Sebenarnya penamaannya ini bisa custom, karena namanya ini lah yang nanti kita gunakan pada saat route group di kumpulan routes nya nanti.

Setelah didaftarkan, kita akan membuat route group dengan middleware yang sudah kita buat tadi. Pada route.php atau web.php kita masukkan route group middleware yang tadi menjadi seperti ini. Untuk route nya bisa kita atur, ketika kita akan keluar atau logout pada saat di route apa saja atau halaman apa sajayang tidak boleh kita ada back buttonnya.


Selesai ? Silahkan lakukan login kemudian logout dan gunakan back button apakah halaman masih kembali atau tidak. Jika masih maka ....

#SyntaxError

Wednesday, November 7, 2018

Membuat Route Secara Otomatis di Laravel 5.2

Membuat Route Secara Otomatis di Laravel 5.2


Pada postingan kali ini saya akan membahas tentang bagaimana cara membuat route secara otomatis di laravel 5.2. Baik, sebelum kita akan membuat route secara otomatis di laravel, kita harus mengerti terlebih dahulu apa itu route, apa fungsinya dan bagaimana cara kerjanya. Setelah itu baru lah kita akan membuat route secara otomatis pada laravelnya.
Apa itu route pada laravel ?

Route pada laravel merupakan alamat yang akan diakses pada URL browser sehingga kita dapat mengakses web yang kita tuju. Route ini dapat dikatakan sebagai acuan kita dalam menuju suatu alamat pada web. Misalkan route kita adalah /admin/index, artinya kita akan menampilkan view pada route tersbut sehingga kita bisa melihat isinya.
Misalkan pada route.php di laravel terdapat sebuah route seperti berikut:

Route:get('/admin/index','AdminController@index');

Artinya ketika kita ingin menjalankan function index pada controller yang namanya AdminController, kita harus menuliskan pada URL kita seperti ini http://localhost:8000/admin/index. Setelah itu baru lah kita akan melihat function index yang ada pada controller kita.

Intinya, ketika kita ingin mengakses sebuah alamat kita harus memasukkan URL route nya sehingga dia dapat diakses dengan benar.

Pada dasarnya banyak sekali method yang ada pada route ini, sehingga kita dapat mengetahui fungsi masing- masing dari setiap method. Adapun macam-macam route yang biasanya atau umum digunakan sebagai berikut 

Route::get($url, $callback);
Route::post($url, $callback);
Route::put($url, $callback);
Route::patch($url, $callback);
Route::delete($url, $callback);
Route::option($url, $callback);


Nah, dari method diatas memilik kegunaan nya masing-masing, sehingga untuk penggunannya juga harus diperhatikan.

Lalu bagaimana dengan membuat route secara otomatis di laravel?

Perlu kita ketahui untuk kegunaan membuat route secara otomatis di laravel, adalah membuat route itu sendiri menjadi lebih rapi dari yang sebelumnya dan juga pada controller nya akan langsung dibuat functionnya secara otomatis. Bagaimana membuat route secara otomatis ?
Langkah yang pertama dilakukan adalah ketikkan perintah php artisan make:controller namacontrollernya --resource. Perintah diatas akan membuat route secara otomatis pada route.php sehingga akan tampil pada route nya seperti ini.


Users adalah URLnya
Untuk lebih detail routenya, bisa kita lihat dengan mengetikkan perintah pada CMD yaitu php artisan route:list. Kita dapat melihat route list yang sudah kita buat maupun route list yang kita buat secara otomatis. Lihat hasilnya akan menjadi seperti ini.


Route akan terbuat secara otomatis, dan function sudah disediakan pada controller nya. Itulah tadi cara bagaimana membuat route secara otomatis di laravel 5.2. Sangat mudah dan simple penggunannya. Setelah itu kita bisa lebih mengedit ataupun mengubah function pada controller secara manual apa yang mau kita sajikan dan melakukan CRUD nya.


#SyntaxError

Monday, November 5, 2018

Cara Membuat Flash Message dengan Sweet Alert di Laravel

Cara Membuat Flash Message dengan Sweet Alert di Laravel



Pada postingan kali ini saya akan membagikan sesuatu yang elegan dan keren yaitu sebuah flash message. Seperti namanya, flash message artinya pesan cepat atau pesan kilat yang akan disampaikan kepada user mengenai sesuatu. Bisa kita katakan sebagai feedback balasan untuk user karena telah melakukan sesuatu. Pada gambar diatas merupakan contoh flash message dimana ketika kita telah berhasil menambahkan data baru pada database.

Setelah sekian lama saya mencoba dan terus mencoba flash message ini akhir nya berhasil juga. Ada perasaan senang yang tak terlukiskan sehingga saya menuangkan nya disini dalam bentuk tulisan sekaligu untuk dokumentasi saya sendiri. Apabila lupa akan bisa lihat kembali pada blog yang saya tulis ini.

Okee.. pada kasus ini saya menggunakan flash message dengan sweet alert di laravel. Terbilang gampang-gampang susah. Dikatakan gampang ketika kita sudah tau, sulit ketika kita kita mengalami error sampai beberapa hari. Namun, ternyata membuat nya cukup sederhana dan simple sekali.

Hal yang pertama kali yang harus kita lakukan adalah menmbahkan "uxweb/sweet-alert": "~1.4" pada file composer.json.


Selanjutnya adalah lakukan perintah composer update pada CMD. Tunggu proses nya hingga selesai.

Setelah itu, tambahkan pada config/app.php, pada bagian providers UxWeb\SweetAlert\SweetAlertServiceProvider::class,  

Tambahkan juga pada aliases,  'Alert' => UxWeb\SweetAlert\SweetAlert::class,

Setelah itu pada bagian layout, kita akan menambahkan file .css dan .js dari sweet-alert. Kunjungi web resmi cdnjs dan cari sweet-alert atau bisa langsung kunjungi DISINI. Dowload file .min.js dan .min.css atau bisa langsung kaitkan pada link tersebut.


Letakkan link .min.css pada tag sebelum </head> dan .min.js pada bagian sebelum tag </body>.  

Jangan lupa untuk menambahkan view dari sweet-alertnya pada bagian bawah script .min.js barusan, dengan perintah @include('sweet::alert'). Dalam kasus ini saya meletakkan langsung pada layout jadi tidak di file view nya karena view akan banyak, sedangkan view pasti memiliki layout.


Selanjutnya, kita akan bergerak menuju tak terbatas dan melampaui nya ke controller. Pada controller kita akan deklarasikan class yang sudah kita pasang tadi dengan perintah use Alert; sehingga kita bisa menggunakan fungsi dari alert pada class. 

Setelah itu, kita akan tambahkan fungsi alert pada bagian function save. Kita akan memanggil flash messange nya sebelum di redirect sehingga dia akan muncul. Seperti gambar dibawah ini.


Silahkan lakukan tambah data, dan jika berhasil maka akan terlihat muncul flash message yang telah dibuat tadi.

Itulah tadi cara membuat flash message dengan sweet-alert di laravel, untuk libraries seewt alertnya bisa dilihat pada situs  Packalyst. Disana terdapat kumpula package khusus LARAVEL.

#SyntaxError

Sunday, November 4, 2018

Cara Membuat Middleware pada Laravel 5.2

Membuat Middleware pada Laravel 5.2


Pada postingan kali ini saya akan membagikan ilmu bagaimana membuat middleware pada laravel 5.2. Seperti biasanya, sebelum kita membuat middleware pada laravel terlebih dahulu kita akan mendefinisikan middleware itu sendiri. Untuk itu kita harus mengetahui middleware secara teori terlbih dahulu baru kita bisa mempraktekkan membuat middleware.

Pengertian Middleware
Middleware adalah perangkat lunak yang menghubungkan perangkat lunak atau aplikasi perusahaan. Middleware memudahkan pengembang perangkat lunak untuk mengelola input/output. Bisa kita sederhanakan bahwa middleware itu penengah request yang masuk kemudian diperiksa dan kemudian dimunculkan outputnya.

Dari gambar diatas bisa kita lihat, bahwa middleware berada pada posisi tengah antara request dan response. Ini memungkin middleware dapat melakukan pengecekan request yang kemudian diteruskan sebagai response.

Pada postingan ini saya akan mencontoh bagaimana cara kita untuk membuat middleware pada laravel. Saya akan mencoba membuat Autentikasi admin dan user. Sehingga, ketika ada request yang masuk akan dicek, dia sebagai admin atau sebagai user.
Hal yang perlu kita lakukan pertama kali adalah membuat autentikasi otomatis pada larevel nya dengan mengetikkan perintah php artisan make:auth. Authentcation bawaan laravel telah menyediakan fungsi-fungsi yang dibutuhkan, sehingga kita tinggal menggunakan fungsi auth nya saja. 

Selanjutnya tambahkan pada file migration create_users_table kolom baru yaitu $table->tinyInteger('role')->default(1); Kita akan set ketika ada user login maka role nya sebagai user biasa. Untuk admin, kita tambahkan data admin dengan edit rolenya menjadi 2.

Setelah itu, ketika perintah php artisan make:middleware adminMiddleware. Setelah sudah lakukan pengeditan pada file adminMiddleware pada direktori app/http/middleware


Method isAdmin itu adalah function yang ada pada model user. Oleh karena itu kita tambahkan pada model user fungsi isAdmin. Sedangkan return $next($request) disana adalah response yang akan diberikan middleware ketika kondisi terpenuhi.


Buat function baru dan ketikkan seperti gambar diatas. Setelah itu, jangan lupa daftar kan middleware baru kita pada kernel. Pada kata 'admin' adalah kata yang akan kita gunakan untuk memanggil middleware nya nanti. Jadi untuk penamaannya tidak masalah jika ingin dicustom.


Selanjutnya, pada route kita akan membuat route group menggunakan middleware admin tadi. Sehingga user yang akan mengakses route yang ada pada group middleware tersebut harus memenuhi syarat pada middleware yang kita buat.


Terakhir lakukan uji coba pada aplikasi. Perbaiki bug dan error jika ada. Silahkan komen yang sopan jika ada pertanyaan.

#SyntaxError

Friday, November 2, 2018

Relasi Table One To One di Laravel

Relasi Table One To One di Laravel


Pada postingan kali ini saya akan membuat bagaimana cara relasi table one to one di laravel. Relasi One to one pada laravel, hampir sama dengan relasi one to many pada postingan saya sebelumnya. Sebenarnya, konsep relasi table pada laravel semua nya sama hanya saja penamaan fungsi dari laravelnya yang berbeda. Misalkan contoh untuk one to one, pada modelnya nanti kita akan menggunakan fitur yang namanya hasOne , sedangkan untuk one to many menggunakan hasMany. Dalam penggunaan relasi pada laravel, kita harus terlebih dahulu mendeklarasikan foreign_key yang berhubungan untuk direlasikan pada table.


Sebelum kita membuat relasi table one to one pada laravel, kita harus mendeklarasikan foreign_key terlbih dahulu. Jika kalian masih bingung caranya, lihat saja pada postingan One to Many Relation diatas. Setelah foreign_key kalian telah benar artinya kita sudah siap untuk membuat relasi one to one di laravel.

Pada postingan ini, saya akan memberikan contoh misalkan ada table User dan table Passport. Pembacaan alurnya sangat sederhana, artinya 1 user hanya memiliki 1 passport, sedangkan 1 passport hanya dimiliki oleh 1 user. Oleh karena itu kita akan bermain pada model User dan model Passport. Sebelumnya jika kalian belum memiliki model, gunakan perintah php artisan make:model namanya pada cmd untuk membuat model secara otomatis.

Pertama, kita akan mengedit model yang ada pada table User


Ini adalah  model user, didalamnya kita tambahkan function dengan nama passport. Setelah itu kita akan menggunakan fitur hasOne yang telah disediakan oleh laravel, arahkan ke arah model passport. Digambar atas saya meletakkan model passportnya pada folder App/Models. Kemudian jangan lupa untuk meletakkan foreign_key setelahnya dengan dipisahkan tanda koma.  Nama function passport ini nanti akan kita panggil untuk menegeluarkan datanya.

Selanjutnya adalah kita akan mencoba mengeluarkan data user yang memiliki passport. Saya akan mengeluarkannya pada folder viewsnya.


Ini adalah contoh sederhana saya buat untuk memanggil datanya. Untuk  $user disana adalah variable yang berasal dari controller. Sehingga dari controller hanya mengeluarkan datanya saja dan kemudian di passing variable nya pada file index atau read data. passport merupakan function yang kita panggil dari model user tadi sehingga kita bisa akses table passport. no_pass merupakan attribut yang akan kita tampilkan yang berasal dari model passport.

Kemudian langkah yang sama lakukan pada model passport. Namun, ada yang berbeda pada fitur yang digunakan. Jika tadi menggunakan hasOne sekarang menggunakan belongsTo. Nah, belongsTo ini fungsi sebagai reverse atau kebalikan dari table yang direlasikan. Sehingga akan terlihat pada gambar dibawah ini.


Enaknya laravel ini adalah dia masih bisa ditelaah dengan menggunakan bahasa manusia. Contohnya seperti gambar diatas, jika dibaca maka akan dibaca class Passport ini dimiliki oleh User.  Oleh karena itu, kita arahkan kepada model user seperti gambar diatas. Setelah itu lakukan cara pemanggilan datanya menggunakan syntax yang sama seperti sebelumnya. Jika kita sesuaikan maka syntax yang akan kita gunakan adalah seperti digambar dibawah ini.


$passport berasal dari controller yang sebelumnya sudah diatur untuk mengeluarkan datanya. Setelah itu user adalah function yang ada pada model passport tadi sehingga kitaakan mengeluarkan properti name yang ada pada table user.

PENTING >> Cara ini dilakukan oleh saya dengan table yang sudah terisi datanya. Jika kalian ingin mengisi datanya silahkan buka postinga CRUD di laravel.



#SyntaxError