Laravel - Tutorial Java Script 4 (Disabled and Enabled Toggle Button)

Kemarin kita sudah mempraktekan membuat sebuah button Follow, dengan konsep "hide and show with data-JS". 

Kali ini kita akan membuat sebuah button checkbox yang terintegrasi dengan JS,

Oke langsung saja kita praktekkan tutorialnya.

Pertama, buat routes baru untuk tutorial ini, dengan menambahkan code pada file web.php pada path protected/app/routes/ menjadi seperti ini.

.
.
.
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
 Route::get('js2', 'Controller\belajar_js\Js2Controller@Index');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
});
.
.
.

Selanjutnya buat controller baru dengan nama Js4Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut.

<?php namespace Controller\belajar_js;

use \View;

Class Js4Controller Extends \BaseController
{
 public function Index()
 {
  return View::make('web/java-script4');
 }
}

Jangan lupa compile file composer lihat disini pada bab composer.

Kemudian buat file view baru dengan nama java-script4.blade.php pada path protected/app/views/web/ isi dengan code berikut.

@extends('layouts/web/master')

<?php $title = 'Java Script 4' ?>

@section('style')
@stop

@section('script')
 {{ HTML::script('public/js/js4.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 4</h4>
 <br>
 <label>Checked and Unchecked with prop</label>
 <br><br>
 <input type="checkbox" name="toggle-check" onclick="toggleCheck(this)">
 <br><br>
 <input type="text" name="effect" disabled> 
</div>
@stop

Setelah itu buat file JS baru dengan nama js4.js pada path public/js/ isi dengan code berikut.

function toggleCheck(button)
{
 if ($(button).prop('checked')) {
  $('[name=effect]').prop('disabled', false);
 } else {
  $('[name=effect]').prop('disabled', true);
 }
}

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini.

.
.
.
   <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
        <a href="{{ URL::to('javaScript/js4')}}">Belajar Script4</a>
      </div>
    </div>
.
.
.

Hasilnya akan terlihat seperti ini

===DONE!===

Read More »

Rails - Create project

Akhirnya punya waktu juga untuk tutorial Ruby on Rails,,

Sebelumya kita sudah menginstall ruby dan rails pada ubuntu kita selanjutnya pada tutrial kali ini kita akan membuat sebuah project awal dari Ruby on Rails.

Jika anda belum menginstall Ruby pada Ubuntu, silahkan lihat disini.
Jika anda belum menginstall Rails pada Ubuntu, silahkan lihat disini.

Oke langsung saja kita praktekkan tutorialnya,

Pertama, buat dulu folder project kita dalam hal ini saya akan memberi nama project dengan nama project-blog-ruby pada path /var/www/html/ caranya seperti ini,

$ cd /var/www/html/project-blog-ruby

$ rails _5.0.0.1_ new .

Selanjutnya edit gemfile menjadi seperti ini,

source 'https://rubygems.org'

gem 'rails',        '5.0.0.1'
gem 'puma',         '3.4.0'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.0.0'
#gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.4.1'

group :development, :test do
  gem 'sqlite3', '1.3.11'
  gem 'byebug',  '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

group :production do
  gem 'pg', '0.18.4'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Kemudian, install project baru tersebut dengan code ini,

$ bundle install --without production

Setelah itu edit file routes.rb pada path config/ menjadi seperti ini,

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'application#hello'
end

Dan edit juga file application_controller.rb menjadi seperti ini,

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
 render html: "hallo, dunia"
  end
end

Terakhir jalankan local server rails dengan code,

//jangan lupa masuk ke path project terlebih dahulu
$ cd /var/www/html/project-blog-ruby

$ rails server

Buka url localhost:3000 dan hasilnya akan terlihat seperti ini.

===DONE!===


WHY?

Versi rails anda tidak support silahkan upgrade rails dengan code seperti ini

Coba lagi, hasilnya seperti ini,

Read More »

Laravel - Tutorial Java Script 3 (Follow and Unfollow Toggle Button)

Selamat malam minggu,,,

Kali ini saya akan meneruskan tutorial Laravel chapter 4 yaitu tentang Java Script,,

Melanjutkan tutorial yang kemarin, tutorial kali ini akan membahas tentang membuat sebuah button Follow, dengan konsep "hide and show  with data-JS", dalam hal ini kita akan menyematkan sebuah kondisi pada code JS.

Oke kita langsung saja praktekkan tutorialnya.

Pertama, buat sebuah route baru dengan mengedit file web.php pada path protected/app/routes/ edit menjadi seperti ini,

.
.
.
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
 Route::get('js2', 'Controller\belajar_js\Js2Controller@Index');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
});
.
.
.

Selanjutnya buat controller baru dengan nama Js3Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut,

<?php namespace Controller\belajar_js;

use \View;
use Model\User;

Class Js3Controller Extends \BaseController
{
 public function Index()
 {
  return View::make('web/java-script3');
 }
}

Jangan lupa compile file composer lihat disini pada bab composer.

Kemudian, buat file view baru dengan nama java-script3.blade.php pada path protected/app/views/web/ isi dengan code berikut,

@extends('layouts/web/master')

<?php $title = 'Java Script 3' ?>

@section('style')
@stop

@section('script')
 {{ HTML::script('public/js/js3.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 3</h4>
 <br>
 <label>Hide and Show Class With Data JS</label>
 <br><br>
 Example: button follow and unfollow <br><br>
 <button onclick="toggleFollow(this,event)" data-action="follow">Follow</button>
</div>
@stop

Setelah itu buat file js baru dengan nama js3.js pada path public/js/ isi dengan code berikut,

function toggleFollow(button, event)
{
 var e = event || window.event;

 e.preventDefault();

 var action = $(button).attr('data-action');

 if (action == 'follow') {
  action_new = 'unfollow';
  $(button).html('Unfollow');
 } else if (action == 'unfollow'){
  action_new = 'follow';
  $(button).html('Follow');
 }
 $(button).attr('data-action', action_new);
}

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,

.
.
.
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
      </div>
.
.
.

Sehingga tampilannya akan tampak seperti ini.

===DONE!===

Read More »

Laravel - Tutorial Java Script 2 (Hide and Show Class)

Java Script memang benar-benar sangat mengasyikan, ada banyak sekali yang akan kita bahas pada Java Script sehingga codedoct.com akan membahasnya pada satu chapter full pada Laravel.

Jika pada tutorial kemarin kita sudah belajar cara hide and show pada JS, kali ini kita akan memanipulasi Class pada JS untuk keperluan hide and show.

Oke langsung saja kita mulai prakteknya.

Pertama, buat dulu route baru untuk halaman ini dengan mengedit file web.php pada path protected/app/routes/ menjadi seperti ini,

.
.
.
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
 Route::get('js2', 'Controller\belajar_js\Js2Controller@Index');
});
.
.
.

Selanjutnya, buat controller baru dengan nama js2Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut,

<?php namespace Controller\belajar_js;

use \View;
use Model\User;

Class Js2Controller Extends \BaseController
{
 public function Index()
 {
  $users = User::all();

  $content['users'] = $users;

  return View::make('web/java-script2')
     ->with('content', $content);
 }
}

Jangan lupa compile file composer lihat disini pada bab composer.

Kemudian buat file view baru dengan nama java-script2.blade.php pada path protected/app/views/web/ isi dengan code berikut,

@extends('layouts/web/master')

<?php $title = 'Java Script 2' ?>

@section('style')
 {{ HTML::style('public/css/content/belajar_js/js2.css') }}
@stop

@section('script')
 {{ HTML::script('public/js/js2.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 2</h4>
 <br>
 <label>Hide and Show Class</label>
 <br><br>
 <div class="user-list">
  @if($content['users'])
   @foreach($content['users'] as $user)
    {{ Form::open(array('url' => 'crud/update/'.$user['id'])) }}
    <div class="box-user">
     <table>
      <tbody class="showing">
       <tr>
        <td>Name</td><td>:</td><td>{{ $user['name'] }}</td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td>{{ $user['username'] }}</td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td>{{ $user['email'] }}</td>
       </tr>
      </tbody>
      <tbody class="editing hidden">
       <tr>
        <td>Name</td><td>:</td><td><input type="text" name="name" value="{{ $user['name'] }}"></td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td><input type="text" name="username" value="{{ $user['username'] }}"></td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td><input type="text" name="email" value="{{ $user['email'] }}"></td>
       </tr>
      </tbody>
     </table>
     <div class="tombol">
      <div class="edit">
       <button type="button" onclick="edit(this, event)">Edit</button>
      </div>
      <div class="save hidden">
       <button type="button" onclick="back(this, event)">Return</button>
       <input type="submit" class="btn" value="Save">
      </div>
     </div>
    </div>
    {{ Form::close() }}
   @endforeach
  @else
   <label>Data user empty ...</label>
  @endif
 </div>
</div>
@stop

Setelah itu buat file js baru dengan nama js2.js pada path public/js/ isi dengan code berikut,

function edit(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.tombol').find('.edit').addClass('hidden');
 $(button).closest('.box-user').find('.showing').addClass('hidden');

 $(button).closest('.tombol').find('.save').removeClass('hidden');
 $(button).closest('.box-user').find('.editing').removeClass('hidden');
}
function back(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.tombol').find('.save').addClass('hidden');
 $(button).closest('.box-user').find('.editing').addClass('hidden');

 $(button).closest('.tombol').find('.edit').removeClass('hidden');
 $(button).closest('.box-user').find('.showing').removeClass('hidden');
}

Buat file sass baru dengan nama js2.scss pada path public/css/content/belajar_js/ isi dengan code berikut,

.user-list{
 width: 350px;
 margin: 0 60px;
 .box-user{
  background-color: #F3F5F7;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 30px;
  padding: 20px;
  .tombol{
   margin-top: 10px;
   text-align: right;
  }
 }
}

Dan edit pula file sass main.scss dengan menambahkan code berikut,

.
.
.
.hidden{
 display: none;
}
.
.
.

Jangan lupa untuk mengcompile file sass lihat disini.

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ tambahkan code berikut,

    <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
      </div>
    </div>

Sehingga tampilannya akan tampak seperti ini

===DONE!===

Read More »

Laravel - Tutorial Java Script (Hide and Show Dropdown)

Akhirnya kita sampai pada chapter laravel yang ke-4.

Pada chapter 4 ini kita akan lebih banyak membahas tentang Java Script, karena menurut saya dengan menggabungkan sebuah project website php dengan Java Script akan membuat website tersebut jauh lebih dinamis dan menarik untuk dilihat.

Pada Bab pertama Laravel chapter 4 ini saja akan memberikan tutorial tentang membuat sebuah program hide and show dropdown dengan menggunakan Java Script.

Program hide and show dropdown ini sangat berguna misalnya dalam membuat index halaman sebuah website contohnya bisa lihat disini.

Oke langsung saja kita praktekan tutorialnya,

Pertama, buat routes baru untuk tutorial ini dengan mengedit file web.php pada path protected/app/routes/ menjadi seperti ini,

/////////////////
// java script //
/////////////////
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
});

Selanjutnya, buat controller baru dengan nama js1Controller.php pada path protected/app/controllers/belajar_js isi dengan code berikut,

<?php namespace Controller\belajar_js;

use \View;

Class Js1Controller Extends \BaseController
{
 public function Index()
 {
  return View::make('web/java-script1');
 }
}

Jangan lupa untuk mengcompile composer nya

Kemudian, buat file view baru dengan nama java-script1.blade.php pada path protected/app/views/web isi dengan code berikut,

@extends('layouts/web/master')

<?php $title = 'Java Script' ?>

@section('style')
 {{ HTML::style('public/css/content/js-satu.css') }}
@stop

@section('script')
 {{ HTML::script('public/js/js1.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 1</h4>
 <br>
 <label>Hide and Show</label>
 <ul>
  <a href="#" style="display: none;" class="dropdownHide" onclick="dropdownHide(this,event)">Dropdown Link</a>
  <a href="#" class="dropdownShow" onclick="dropdownShow(this,event)">Dropdown Link</a>
  <ul style="display: none;" class="dropdown">
   <li>Test 1</li>
   <li>Test 2</li>
   <li>Test 3</li>
  </ul>
 </ul>
</div>
@stop

Setelah itu buat file js baru dengan nama js1.js pada path public/js/js1.js isi dengan code berikut

function dropdownShow(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.isi').find('.dropdownHide').show();
 $(button).hide();
 $(button).closest('.isi').find('.dropdown').show(200);
}
function dropdownHide(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.isi').find('.dropdownShow').show();
 $(button).hide();
 $(button).closest('.isi').find('.dropdown').hide(200);
}

Terakhir edit file header.blade.php dan master.blade.php pada path protected/app/views/layouts/web tambahkan code berikut

- header.blade.php

.
.
.
    <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
      </div>
    </div>
.
.
.

- master.blade.php

.
.
.
 <!-- Custom Scripts -->
 @section('script')
 @show
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
.
.
.

Sehingga tampilannya akan tampak seperti ini,

===DONE!===

Read More »

Laravel - Membuat halaman buku

Akhirnya kita sampai pada halaman terakhir pada chapter 3 Laravel, kali ini saya akan membagikan sebuah tutorial untuk membuat sebuah halaman buku pada website laravel menggunakan script.

Tutorial ini sangat berguna saat kita akan membuat sebuah halaman yang penuh dengan text, dan untuk mempermudah user dalam navigasi halaman tersebut maka harus dibuat sebuah link pada daftar isi agar saat link diklik akan langsung menuju bab atau bagian yang ingin dibaca tanpa harus scroll manual.

Oke langsung saja kita mulai tutorialnya,

Pertama, buat root baru pada path protected/app/routes/web.php dengan menambahkan code dibawah pada file web.php

.
.
.
//////////
// BOOK //
//////////
Route::get('book', 'Controller\BookController@Index');

Selanjutnya buat controller baru dengan nama BookController.php pada path protected/app/controllers/ dan isikan code berikut,

<?php namespace Controller;

use \View;

Class BookController Extends \BaseController
{
 Public function Index()
 {
  return View::make('book');
 }
}

Jangan lupa setelah membuat class baru kita harus mengcompilenya dengan cara,
masuk ke path protected terlebih dahulu kemudian ketikan syntax.

php composer.phar dump-autoload

Kemudian edit sedikit file master.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 
 <title>
  @if($title)
   {{ $title }}
  @else
   Codedoct.com
  @endif
 </title>

 <!-- Custom Style -->
 @section('style')
 @show
 {{ HTML::style('public/css/master/main.css') }}

 <!-- Custom Scripts -->
 @section('script')
 @show

</head>
<body>
 @include('layouts.web.header')
 @yield('content')
 @include('layouts.web.footer')
</body>
</html>

Setelah itu buat file view baru dengan nama book.blade.php pada path protected/app/views/book.blade.php isikan code berikut,

@extends('layouts/web/master')

<?php $title = "Book" ?>

@section('style')
 {{ HTML::style('public/css/book.css') }}
@stop

@section('script')
 <script>
 //offset anchor tags with fixed header and smooth scroll
 $(function() {
   $('a[href*=#]:not([href=#])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
 && location.hostname == this.hostname) {

       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
           scrollTop: target.offset().top - 60 //offset height
         }, 500);
         return false;
       }
     }
   });
   //Executed on page load with URL containing an anchor tag.
   if($(location.href.split("#")[1])) {
       var target = $('#'+location.href.split("#")[1]);
       if (target.length) {
         $('html,body').animate({
           scrollTop: target.offset().top - 60 //offset height
         }, 500);
         return false;
       }
     }
 });

 </script>
@stop

@section('content')
<div class="daftar-isi">
 <h2>My Book</h2>
 <ul>
  <li><a href="#test1">Test 1</a></li>
  <li><a href="#test2">Test 2</a></li>
  <li><a href="#test3">Test 3</a></li>
  <li><a href="#test4">Test 4</a></li>
 </ul>
</div>

<!-- Begin book -->
<div class="book">
 <div id="test1">
  <h4>Test 1</h4>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
 </div>

 <div id="test2">
  <h4>Test 2</h4>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
 </div>

 <div id="test3">
  <h4>Test 3</h4>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
 </div>
 
 <div id="test4">
  <h4>Test 4</h4>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
 </div>
</div>
@stop

Kemudian buat file scss baru dengan nama book.scss pada path public/css/book.scss isikan code berikut,

.daftar-isi{
 margin-top: 20px;
 padding: 20px 2%;
 text-align: left;
 width: 96%;
 border-radius: 5px;
 background-color: white;
 border: 1px solid #e1e8ed;
 overflow: auto;
}

.book{
 margin-top: 20px;
 padding: 20px 2%;
 text-align: left;
 width: 96%;
 border-radius: 5px;
 background-color: white;
 border: 1px solid #e1e8ed;
 overflow: auto;
}

Jangan lupa setelah membuat dan mengedit file sass kita harus mengcompilenya, tutorial sass bisa lihat disini.

Setelah itu buat link baru untuk menuju ke view book.blade.php dengan mengedit sedikit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini.

.
.
.
  <div class="dropdown">
     <button class="button">Menu(css)</button>
     <div class="dropdown-content">
       <a href="{{ URL::to('crud/users')}}">User</a>
       <a href="{{ URL::to('book')}}">Index Book</a>
       <a href="#">Link 3</a>
     </div>
   </div>
.
.
.

Sehingga hasil akhirnya akan tampak seperti ini.

===DONE!===

Read More »

Engine PHP - Create txt file

Pada tutorial kali ini kita akan belajar membuat sebuah file .txt dari php, biasanya file .txt ini sering kali digunakan saat kita akan membuat sebuah sistem crontab yang membutuhkan data log dari proses crontab tersebut.

Data log ini biasanya disimpan pada file .txt agar suatu saat nanti jika terjadi error pada crontab yang menyebabkan proses crontab terhenti kita bisa tahu sampai diproses mana crontab tersebut terhenti, sehingga kita bisa mengidentifikasi penyebab berhentinya crontab dan dapat melanjutkan kembali proses crontab tersebut dari posisi dia berhenti sebelumnya.

Berikut syntax-syntax membuat file .txt,

//akses file yang akan dipakai
$myfile = fopen("/path/file/name_file.txt", "a") or die("Unable to open file!");
//write text
$txt = "------------test-----------";
fwrite($myfile, $txt);
//close file
fclose($myfile);

Aturan akses file bisa dilihat disini.
Tutorial ini adalah penyempurnaan dari tutorila sebelumnya tentang Move database field to other database.

Oke langsung saja kita praktekan tutorialnya.

Pertama buka file movedatabaselog.php yang sudah dibuat pada tutorial sebelumnya, edit menjadi seperti ini.

<?php
  $host="localhost";
  $user="root";
  $pass="root";  

  $dbname1 = "source_logs";
  $dbname2 = "backup_logs";

  $db=mysql_connect($host,$user,$pass);
  
  $sql2="USE $dbname2";
  mysql_query($sql2,$db);

  //create logs processing--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  $myfile = fopen("/var/www/html/crontab/log_processing.txt", "a") or die("Unable to open file!");
  $date=strtotime("now");
  $enddate = strtotime("-7 days", $date);
  //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  //cek any databse or not?
  $sql = "SELECT * FROM user_logs";
  $hsl1 = mysql_query($sql,$db);
  if (!$hsl1) {
    //create database if not exists
    $sql4 ="CREATE DATABASE IF NOT EXISTS `backup_FE` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci";
    mysql_query($sql4,$db);

    $txt = "Database was create \n";
    fwrite($myfile, $txt);

    $sql2="USE $dbname2";
    mysql_query($sql2,$db);

    //create table if not exists
    $sql4 = "CREATE TABLE IF NOT EXISTS `user_logs` (
              `id` bigint(20) NOT NULL,
              `user_id` bigint(20) DEFAULT NULL,
              `type` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `request_method` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `url` text COLLATE utf8_unicode_ci,
              `parameter_json` text COLLATE utf8_unicode_ci,
              `status` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `logable_id` int(11) DEFAULT NULL,
              `logable_type` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `ip` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `device_type` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `device` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `platform` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `platform_version` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `browser` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `browser_version` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `app_version` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `android` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `ios` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
              `duration` decimal(10,4) DEFAULT NULL,
              `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
              `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
              `deleted_at` timestamp NULL DEFAULT NULL
            ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci";
    mysql_query($sql4,$db);

    //add primary key
    $sql4 = "ALTER TABLE `user_logs` ADD PRIMARY KEY (`id`)";
    mysql_query($sql4,$db);

    //add auto increment
    $sql4 = "ALTER TABLE `user_logs` MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT";
    mysql_query($sql4,$db);

    $txt = "Table was create \n";
    fwrite($myfile, $txt);
  }

  //begin backup
  $sql = "SELECT * FROM user_logs";
  $hsl2 = mysql_query($sql,$db);
  $array2 = mysql_fetch_array($hsl2);
  if (!$array2) {
    //if empty field on database insert this

    $txt = "first insert on ".date("Y-m-d h:i:sa", $date)."\n";
    fwrite($myfile, $txt);
 
    $sql2="USE $dbname2";
    mysql_query($sql2,$db);
    
    $sql2="INSERT INTO user_logs (user_id,type,request_method,url,parameter_json,status,logable_id,logable_type,ip,device_type,device,platform,platform_version,browser,browser_version,app_version,android,ios,duration,created_at,updated_at,deleted_at) ";
    $sql2.="(SELECT user_id,type,request_method,url,parameter_json,status,logable_id,logable_type,ip,device_type,device,platform,platform_version,browser,browser_version,app_version,android,ios,duration,created_at,updated_at,deleted_at "; 
    $sql2.="FROM $dbname1.user_logs)";
    mysql_query($sql2,$db);

    $txt = "user_logs insert first DONE! at \n".$date;
    fwrite($myfile, $txt);
  } elseif ($array2) {
    //if database was insert before so insert this

    $txt = "backup from ".date("Y-m-d h:i:sa", $date)." until ".date("Y-m-d h:i:sa", $enddate)."\n";
    fwrite($myfile, $txt);

    $sql2="USE $dbname2";
    mysql_query($sql2,$db);
    
    $sql2="INSERT INTO user_logs (user_id,type,request_method,url,parameter_json,status,logable_id,logable_type,ip,device_type,device,platform,platform_version,browser,browser_version,app_version,android,ios,duration,created_at,updated_at,deleted_at) ";
    $sql2.="(SELECT user_id,type,request_method,url,parameter_json,status,logable_id,logable_type,ip,device_type,device,platform,platform_version,browser,browser_version,app_version,android,ios,duration,created_at,updated_at,deleted_at "; 
    $sql2.="FROM $dbname1.user_logs WHERE created_at > (SELECT created_at FROM $dbname2.user_logs ORDER BY created_at DESC LIMIT 1))";
    mysql_query($sql2,$db);

    $txt = "\n user_logs backup DONE! \n";
    fwrite($myfile, $txt);

    //delete logs that are not used anymore
    $sql3="USE $dbname1";
    mysql_query($sql3,$db);
    $sql3="DELETE FROM user_logs WHERE created_at < DATE_ADD(CURDATE(), INTERVAL -6 DAY)";
    mysql_query($sql3,$db);

    $txt = "delete user_logs source DONE! \n";
    fwrite($myfile, $txt); 

    $txt = "----------------------------------------- \n";
    fwrite($myfile, $txt);
    fclose($myfile);
  }
?>

Kemudian jalankan file tersebut pada terminal Ubuntu seperti ini.

php /var/www/html/crontab/movedatabaselog.php

Sehingga program tersebut akan secara otomatis membuat file log_processing.txt pada path /var/www/html/crontab/ yang berisi log dari proses menjalankan program tersebut.

Jika anda ingin menjalankannya pada crontab bisa lihat disini.

===DONE!===

Read More »