Tutorial programming: September 2016

What is - Array

Array merupakan sekumpulan variabel yang memiliki tipe data yang sama, untuk membedakannya antara variabel yang satu dengan yang lain di dalam Array dibedakan berdasarkan subscriptnya.

Oke untuk lebih memahaminya berikut beberapa sintax array menggunakan php,

Simple Array

$a = array(
 'a' => 'ayam',
 'b' => 'bebek',
 'c' => 'cacing',
);

//doesn't mater if the last array not use ','
$b = array(
 'a' => 'ayam',
 'b' => 'bebek',
 'c' => 'cacing'
);

//show array
var_dump($a);
echo "<br>";
var_dump($b);

echo "<br><br>";

//show beauty array
foreach ($a as $key => $value) {
    echo "$key: $value <br>";
}

echo "<br>";

//show string array
// '\' for write parse html on php
echo "string array \$a => a = ".$a['a'];
echo "<br>";
echo "string array \$b => c = ".$b['c'];

echo "<br><br>";

Sorting Array

$unsort = array(
 '1' => 'ayam',
 '3' => 'cacing',
 '2' => 'bebek',
);

//unsort array
echo "unsort<br>";
foreach ($unsort as $key => $value) {
 echo "$key: $value <br>";
}

echo "<br>";

//sorting array asc
function sortArray($a, $b)
{
    if ($a == $b) {
        return 0;
    }
    return ($a < $b) ? -1 : 1;
}
usort($unsort, "sortArray");
echo "sorted<br>";
foreach ($unsort as $key => $value) {
 echo "$key: $value <br>";
}

echo "<br>";

//sorting array desc
usort($unsort, function($a, $b) 
{
    return $b - $a;
});
echo "sorted with short way<br>";
foreach ($unsort as $key => $value) {
 echo "$key: $value <br>";
}

echo "<br>";

//sorting sub array key
$unsorts = array(
 '0' => array(
  'posisi' => '2',
  'content' => 'bebek',
 ),
 '1' => array(
  'posisi' => '3',
  'content' => 'cacing',
 ),
 '2' => array(
  'posisi' => '1',
  'content' => 'ayam',
 ),
);

echo "<br>";

//show array
var_dump($unsorts);

echo "<br><br>";

//show unsort array with nice display
echo "unsort<br>";
for ($i=0; $i < count($unsorts) ; $i++) { 
 echo $unsorts[$i]['posisi'].' : '.$unsorts[$i]['content'].'<br>';
}

echo "<br>";

//sorting desc array with key date
usort($unsorts, function($a, $b) 
{
    return $b['posisi'] - $a['posisi'];
});
//show sorted desc array with nice display
echo "sorted desc<br>";
for ($i=0; $i < count($unsorts) ; $i++) { 
 echo $unsorts[$i]['posisi'].' : '.$unsorts[$i]['content'].'<br>';
}

echo "<br>";

//sorting asc array with key date
usort($unsorts, function($a, $b) 
{
    return $a['posisi'] - $b['posisi'];
});
//show sorted asc array with nice display
echo "sorted asc<br>";
for ($i=0; $i < count($unsorts) ; $i++) { 
 echo $unsorts[$i]['posisi'].' : '.$unsorts[$i]['content'].'<br>';
}

echo "<br>";

//array sort, reverse, join
$the_array = array("asd", "sdas", "dsa", "qwerq");
sort($the_array);
print join(",",$the_array);
rsort($the_array);
print join("::", $the_array);
output:
asd,dsa,qwerq,sdas
sdas::qwerq::dsa::asd

//array push
$apalah = array();
array_push($apalah, "hallo");
array_push($apalah, "aloha");
array_push($apalah, "hai");
array_push($apalah, "hoii");
array_push($apalah, "yaaa!");
print count($apalah);
output:
5

Array to json

$array_to_json = array(
 '1' => 'ayam',
 '3' => 'cacing',
 '2' => 'bebek',
);

$json = json_encode($array_to_json);
echo $json;

Kembali lagi ke Tutorial Laravel, pada tutorial sebelumnya kita sudah sedikit belajar tentang bootstrap, kali ini kita akan belajar membuat sebuah pagination atau halaman pada tampilan atau UI website kita agar terlihat lebih rapi dan tidak memberatkan server karena terlalu banyak load database server.

Pagination pada Laravel sendiri sudah ada librarynya jadi kita hanya perlu memanggilnya saja pada controller kemudian menampilkan UI nya pada blade.

Oke langsung saja kita praktekkan cara membuat pagination pada Laravel,

Pertama, edit file controller Js2Controller.php pada path protected/app/controllers/belajar_js/ menjadi seperti ini,

<?php namespace Controller\belajar_js;

use \View;
use Model\User;

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

  $content['users'] = $users;

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

Terlihat pada controller codedoct menggunakan paginate(2) yang berarti data users yang ditampilkan hanya 2 perhalaman.

Selanjutnya edit file blade java-script2.blade.php pada path protected/app/views/web/ menjadi seperti ini,

@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" class="btn btn-default" onclick="edit(this, event)">Edit</button>
      </div>
      <div class="save hidden">
       <button type="button" class="btn btn-default" onclick="back(this, event)">Return</button>
       <input type="submit" class="btn btn-success" value="Save">
      </div>
     </div>
    </div>
    {{ Form::close() }}
   @endforeach
  @else
   <label>Data user empty ...</label>
  @endif
 </div>
//disini pagination nya
 <div class="text-center"> 
  {{ $content['users']->appends(Input::except(array('page')))->links() }}
 </div>
</div>
@stop

Pastikan data users anda lebih dari 2 karena nilai pagination yang ditetapkan adalah 2, jika belum silahkan tambah user lagi dengan klik submenu user pada menu menu(css) seperti ini,

dan kemudian klik create,

Jika sudah selesai selanjutnya buka submenu Belajar script2 pada menu menu(css).

sehingga tampilan paginationnya akan tampak seperti ini

===DONE!===

Pada tutorial sebelumya, kita sudah menambahan css framework bootstrap pada website. Sehingga ada beberapa tampilan website akan rusak, seperti bagian header ini.

Sekarang saatnya untuk memperbaiki design yang rusak tersebut sekaligus belajar bootstrap, hehe..

Oke langsung saja kita praktekkan,

Silahkan bandingkan code-code dibawah ini dengan dengan file pada path aslinya, silahkan ganti code yang berubah dengan code-code dibawah ini, dan jangan lupa pelajari code-code yang telah diubah untuk menyesuaikan design css framework bootstrap.

Edit file main.scss pada path public/css/master menjadi seperti ini,

body {
 margin: 0 0 0 0;
 width: 100%;
 background-color: #e9eaee !important;
 text-align: center;
}
.hidden{
 display: none;
}
.isi{
 /* sesuaikan untuk bootstrap */
 margin: 2%;
 /*---------------------------*/
 padding: 20px 2%;
 text-align: left;
 width: 96%;
 border-radius: 5px;
 background-color: white;
 border: 1px solid #e1e8ed;
 overflow: auto;
}
@import 'header';
@import 'footer';

Edit file _header.scss pada path public/css/master menjadi seperti ini.

.header{
 text-align: left;
 margin-top: 10px;
 width: 100%;
 /* sesuaikan untuk bootstrap */
 height: 230px;
 /*---------------------------*/
 background-color: white;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
 .banner{
  text-align: center;
  width: 100%;
  height: 129px;
  .welcome{
   padding-top: 60px;
   float: left;
   width: 40%;
   text-align: right;
  }
  .gambar{
   float: left;
   width: 20%;
  }
 }
}
.menu{
 margin-top: 0;
 width: 90%;
 margin-right: 5%;
 margin-left: 5%;
 .kiri{
  float: left;
  width: 50%;
  text-align: left;
  li{
   list-style: none;
   display: inline;
   margin-right: 5px;
   /*css for dropdown script*/
   .dropdown-script{
    position: relative;
    display: inline-block;
    a{
     &:hover{
      background-color: #ededed;
      color: black;
      cursor: pointer;
     }
    }
   }
   .dropdown-content-script{
    display: none;
    position: absolute;
    background-color: #e5e5e5;
    min-width: 150px;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    a{
     color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
   }
   .show{
    display: block;
   }
   /*end*/
  }
  .dropdown {
      position: relative;
      display: inline-block;
      &:hover .dropdown-content{
       display: block;
      }
      &:hover .button{
       color: lighten(black, 10%);
    text-decoration: none;
    background-color: #ededed;
      }
  }
  .dropdown-content {
   border-radius: 3px;
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      a{
       color: black;
       padding: 10px 20px;
       text-decoration: none;
       display: block;
       &:hover{
        background-color: #e5e5e5;
       }
      }
  }
 }
 .kanan{
  float: right;
  width: 50%;
  text-align: right;
  li{
   display: inline-block;
   background-color: #e5e5e5;
   margin-right: 5px;
   display: inline-block;
   cursor: pointer;
   padding: 10px 20px;
   border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   &:hover {
    color: lighten(black, 10%);
    text-decoration: none;
    background-color: #ededed;
   }
  }
 }
}

jangan lupa untuk mengcompile file sass dengan mengetikkan code seperti ini pada terminal atau powershell.

sass --watch main.scss:main.css

Edit file book.blade.php pada path protected/app/views/ menjadi seperti ini.

@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="isi">
 <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>
</div>
@stop

Edit file java-script7.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 7 sebelum proses ajax</h4>
 <br>
 <label>Expert programmer Java Script!!!</label>
 <br><br>
 <div class="clearfix">
  <div class="form-group">
   <label>Choose what do you want to edit</label>
   <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
    <option value=""></option>
    @foreach($content['test_ajaxs'] as $test_ajax)
     <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
    @endforeach
   </select>
  </div>
  <button class="btn btn-primary" onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
 </div>
</div>
@stop

@section('modal')
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="align-center">Header Modal</h4>
    </div>
    <div class="modal-body">
     <label>Edit content test ajax</label>
     <input type="hidden" name="id_testajax" value="">
     <div class="form-group">
      <input type="text" name="content_testajax" class="form-control">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button onclick="updateContentTestAjax(this)" type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Edit file template javascript7.blade.php pada path protected/app/views/web/templates/ menjadi seperti ini.

<h4>Belajar java script 7 setelah proses ajax</h4>
<br>
<label>Expert programmer Java Script!!!</label>
<br><br>
<div class="clearfix">
 <div class="form-group">
  <label>Choose what do you want to edit</label>
  <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
   <option value=""></option>
   @foreach($content['test_ajaxs'] as $test_ajax)
    <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
   @endforeach
  </select>
 </div>
 <button class="btn btn-primary" onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
</div>

Edit file hello.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@extends('layouts/web/master')
@section('script')
@stop
@section('content')
 <?php $title = "Welcome" ?>
@stop

Edit 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') }}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <!-- Custom Scripts -->
 @section('script')
 @show
 {{ HTML::script('public/js/dropdown-menu.js') }}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

 <!-- modal -->
 @section('modal')
 @show

 @include('layouts.web.footer')
</body>
</html>

Edit file readUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@extends('layouts/web/master')
@section('content')
 <?php $title = "User" ?>
 <div class="isi">
  <div class="row">
   <table class="table table-bordered table-hover">
      <thead>
       <tr>
           <th>ID</th>
           <th>NAME</th>
           <th>USERNAME</th>
           <th>EMAIL</th>
           <th>PASSWORD</th>
           <th>CREATED AT</th>
           <th>UPDATED AT</th>
           <th>ACTION</th>
        </tr>
      </thead>
      <tbody>
        @foreach($data_user as $users)
          <tr>
             <td>{{ $users->id }}</td>
             <td>{{ $users->name }}</td>
             <td>{{ $users->username }}</td>
             <td>{{ $users->email }}</td>
             <td>{{ $users->password }}</td>
             <td>{{ $users->created_at }}</td>
             <td>{{ $users->updated_at }}</td>
             <td>
              <a href="{{ URL::to('crud/update/'.$users->id) }}">Edit<br>
              <a href="{{ URL::to('crud/delete/'.$users->id) }}">Delete
             </td>
          </tr>
        @endforeach
       </tbody>
   </table>
  </div>
   <br>
   <button class="btn btn-default" onclick="location.href='{{ URL::to('crud/create') }}';">Create</button>
 </div>
@stop

Edit file java-script2.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@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" class="btn btn-default" onclick="edit(this, event)">Edit</button>
      </div>
      <div class="save hidden">
       <button type="button" class="btn btn-default" onclick="back(this, event)">Return</button>
       <input type="submit" class="btn btn-success" value="Save">
      </div>
     </div>
    </div>
    {{ Form::close() }}
   @endforeach
  @else
   <label>Data user empty ...</label>
  @endif
 </div>
</div>
@stop

Edit file updateUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@extends('layouts/web/master')
@section('content')
 <?php $title = "Update User" ?>
 <div class="isi">
  <form method="post" action="">
  <table>
   <tr>
    <td>Name</td>
    <td nowrap>:</td>
    <td><input type="text" name="name" value="{{ $data_user['name'] }}"><span style="color:red"><?php echo $errors->first('name') ?></td>
   </tr>
   <tr>
    <td>Username</td>
    <td nowrap>:</td>
    <td><input type="text" name="username" value="{{ $data_user['username'] }}"><span style="color:red"><?php echo $errors->first('username') ?></td>
   </tr>
   <tr>
    <td>Email</td>
    <td nowrap>:</td>
    <td><input type="text" name="email" value="{{ $data_user['email'] }}"><span style="color:red"><?php echo $errors->first('email') ?></span></td>
   </tr>
   <tr>
    <td colspan="3">
     <br>
     <input type="submit" class="btn btn-default" value="Save">
    </td>
   </tr>
  </table>
  </form>
 </div>
@stop

Edit file createUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.

@extends('layouts/web/master')
@section('content')
 <?php $title = "Create User" ?>
 <div class="isi">
  <form method="post" action="">
  <table>
   <tr>
    <td>Name <span class="error"><?php echo $errors->first('name') ?></span></td>
    <td nowrap>:</td>
    <td><input type="text" name="name"></td>
   </tr>
   <tr>
    <td>Username <span class="error"><?php echo $errors->first('username') ?></span></td>
    <td nowrap>:</td>
    <td><input type="text" name="username"></td>
   </tr>
   <tr>
    <td>Email <span class="error"><?php echo $errors->first('email') ?></span></td>
    <td nowrap>:</td>
    <td><input type="text" name="email"></td>
   </tr>
   <tr>
    <td>Password <span class="error"><?php echo $errors->first('password') ?></span></td>
    <td nowrap>:</td>
    <td><input type="password" name="password"></td>
   </tr>
   <tr>
    <td colspan="3">
     <br>
     <input type="submit" class="btn btn-default" value="Create">
    </td>
   </tr>
  </table>
  </form>
 </div>
@stop

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

<div class="header">
 <div class="banner">
  <div class="welcome">Welcome</div>
  {{-- code dibawah ini menggunakan constant variabel --}}
  <div class="gambar"><a href="#"><img src="{{ IMAGE_HEADER }}" style="width:"100px" height="129px";"></a></div>
 </div>
 <hr>
 <div class="menu">
  <div class="kiri">
   <li>
    <div class="dropdown">
      <button class="btn btn-default">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>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
        <a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
      </div>
    </div>
   </li>
   <li>
     <div class="dropdown-script">
      <button onclick="myFunction()" class="dropbtn btn btn-default">Menu(css)</button>
      <div id="myDropdown" class="dropdown-content-script">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
     </div>
   </li>
  </div>
  <div class="kanan">
   <li onclick="location.href='{{ URL::to('/') }}';">Login</li>
   <li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
  </div>
 </div>
</div>

Banyak sekali yang kita rombak dan lihat salah satu hasilnya,

===DONE!!!===

Pada perkembangannya, saat ini framework development mobile app semakin banyak. Codedoct pun merasa tertantang untuk mencoba salah satu framework tersebut.

Setelah satu minggu mencari referensi tentang framework mobile app ini akhirnya codedoct memutuskan untuk menggunakan react-native.

React-Native merupakan framework yang digunakan untuk mengembangkan aplikasi multiplatform (Android dan iOS) yang dibuat dan dikembangkan oleh Facebook.

Tutorial kali ini akan membahas tentang cara menginstall React -Native pada Windows,

Pertama, install terlebih dahulu software pendukungnya yaitu,

python2 => download disini

node.js => download disini

Jika sudah diinstall, check dengan mengetikkan code berikut pada powershell atau command prompt,

npm -v

Selanjutnya, buka powershell atau command prompt dan ketikkan code berikut,

npm install -g react-native-cli

Jika sudah diinstall, check dengan mengetikkan code berikut pada powershell atau command prompt,

react-native -v

Untuk bisa menjalankan menjalankan React-Native kita harus memiliki sebuah emulator atau bisa juga dengan menghubungkan langsung handphone anda dan melakukan beberapa pengaturan.

Dalam tutorial ini codedoct akan menggunakan sebuah emulator yang sudah disediakan oleh Android Studio, oleh karena itu kita install terlebih dahulu Android Studio.

Sebelum menginstall Android Studio pastikan bahwa komputer yang kita gunakan sudah terinstall jdk, jika belum silahkan download disini.

Jika sudah, silahkan download Android Studio disini, dan install

Semua sudah terinstall, selanjutnya membuat project React-Native.

===DONE!===

Setelah pada tutorial sebelumnya kita sudah menginstall komponen yang kita butuhkan untuk membuat sebuah project React-Native, sekarang saatnya untuk mulai bermain dengan React-Native ini, hehe,.,.

Oke Langsung saja kita mulai tutorialnya..

Pertama, pastikan emulator anda sudah dijalankan,

Selanjutnya, buka powershell atau command prompt sebagai Administrator dengan cara klik kanan dan pilih run as administrator,

Kenapa harus administrator?

karena perintah yang akan kita jalankan membutuhkan akses penuh(administrator) untuk membuat folder baru dan langsung mengkonfigurasi.

Selanjutnya, ketikkan code berikut,

react-native init testProject
cd testProject
react-native run-android

Buka emulator dan hasilnya kira-kira akan tampak seperti ini,

===DONE!===

WHY?

1. Jika pada emulator tidak muncul apa-apa(putih polos)
Silahkkan tekan "R" dua kali.

2. Failed to find target with hash string "android-23"?

Berarti komponen android-23 belum diinstall pada sdk, silahkan buka sdk pada path C:\Users\[nama users]\AppData\Local\Android\sdk.

(Folder AppData biasanya di hidden)

Klik 2 kali aplikasi SDK Manager sehingga akan tampak seperti ini,

Jangan perdulikan packages yang sudah tercentang(biarkan tetap tercentang), anda cukup mencentang android SDK Build Tools rev : 23.03, 23.02, 23.01 dan klik install packages.

3. SDK location not found?

Buat file local.properties pada path testProject/android seperti ini,

isikan code berikut pada file local.properties

sdk.dir=C:/Users/[Nama User]/AppData/Local/Android/sdk

setelah itu ketikkan pada powershell atau command prompt code berikut,

set ANDROID_HOME=C:/Users/[Nama User]/AppData/Local/Android/sdk

4. No connected devices?

emulator anda belum dijankan, caranya

buka aplication AVD Manager pada path C:\Users\[nama users]\AppData\Local\Android\sdk.

klik create, buat device emulator baru kira-kira biginilah,

jika sudah klik ok dan pada AVD Manager pilih device yang baru dibuat tadi dan klik start.

4. VT-x is disabled in BIOS?

enabled Intel Virtual Technology pada saat boot seperti ini (codedoct menggunakan laptop lenovo ideapad 300),

Pada tutorial sebelumnya kita sudah belajar membuat operation CRUD pada Java Script menggunakan Ajax kali ini kita akan menyempurnakan tutorial tersebut menjadi lebih complex , dan tentunya lebih menantang, hehe,.,

Tutorial kali ini merupakan tutorial terakhir dari chapter 4 yang merupakan chapter Java Script for Laravel, tutorial kali ini akan lebih menitik beratkan pada penggunaan fungsi-fungsi jQuerynya..

Oke, langsung saja kita praktekkan tutorialnya..

Pertama, buat route baru untuk project kita yang baru 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');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
 Route::get('js5', 'Controller\belajar_js\Js5Controller@Index');
 Route::group(array('prefix' => 'js6'), function(){
  Route::get('', 'Controller\belajar_js\Js6Controller@Index');
  Route::post('', 'Controller\belajar_js\Js6Controller@addTestAjax');
 });
 Route::group(array('prefix' => 'js7'), function(){
  Route::get('', 'Controller\belajar_js\Js7Controller@Index');
  Route::post('', 'Controller\belajar_js\Js7Controller@update');
 });
});
.
.
.

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

<?php namespace Controller\belajar_js;

use \View;
use \Response;
use \Request;
use \Input;

use Model\JavaScript6;

Class Js7Controller Extends \BaseController
{
 public function Index()
 {
  $test_ajaxs = JavaScript6::all();
  $content['test_ajaxs'] = $test_ajaxs; 

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

 public function update()
 {
  if(Request::ajax()){
   $response['status'] = 'That id not found at table java_script_6';
   $javascript6 = JavaScript6::find(Input::get('id_testajax'));

   if ($javascript6) {
    $response['status'] = 'OK';

    $javascript6->test_ajax = Input::get('content_testajax');
    $javascript6->update();

    $javascript6_now = JavaScript6::all();
    $content['test_ajaxs'] = $javascript6_now;

    $response['html'] = View::make('web/templates/javascript7')
         ->with('content', $content)
         ->render();
   } 
   return Response::json($response);
  }
  App::abort(404);
 }
}

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

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 7 sebelum proses ajax</h4>
 <br>
 <label>Expert programmer Java Script!!!</label>
 <br><br>
 <div class="row">
  <div class="col-md-5">
   <div class="form-group">
    <label>Choose what do you want to edit</label>
    <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
     <option value=""></option>
     @foreach($content['test_ajaxs'] as $test_ajax)
      <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
     @endforeach
    </select>
   </div>
   <button onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
  </div>
 </div>
</div>
@stop

@section('modal')
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="align-center">Header Modal</h4>
    </div>
    <div class="modal-body">
     <label>Edit content test ajax</label>
     <input type="hidden" name="id_testajax" value="">
     <div class="form-group">
      <input type="text" name="content_testajax" class="form-control">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button onclick="updateContentTestAjax(this)" type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Buat juga file blade templateya dengan nama javascript7.blade.php pada path protected/app/views/web/templates/ isi dengan code berikut,

<h4>Belajar java script 7 setelah proses ajax</h4>
<br>
<label>Expert programmer Java Script!!!</label>
<br><br>
<div class="row">
 <div class="col-md-5">
  <div class="form-group">
   <label>Choose what do you want to edit</label>
   <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
    <option value=""></option>
    @foreach($content['test_ajaxs'] as $test_ajax)
     <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
    @endforeach
   </select>
  </div>
  <button onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
 </div>
</div>

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

function lemparKeDataTestAjax(button)
{
 var id_data_lempar = $(button).val();
 var content_data_lempar = $(button).find('option:selected').text();

 //lempar ke
 $('.isi').find('button').data('id-testajax', id_data_lempar);
 $('.isi').find('button').data('content-testajax', content_data_lempar);
}

function editContent(button)
{
 var modal  = $('#test-modal');
 var id_test_ajax = $(button).data('id-testajax');
 var content_test_ajax = $(button).data('content-testajax');

 // Show Modal
 if (id_test_ajax == '') {
  alert('Please choose content that will edit');
 } else {
  modal.modal({backdrop: 'static', keyboard: false});
  modal.find('input[name=id_testajax]').val(id_test_ajax);
  modal.find('input[name=content_testajax]').val(content_test_ajax);
 }
}

function updateContentTestAjax(button)
{
 var modal = $('#test-modal');
 var content_test_ajax = modal.find('input[name=content_testajax]').val();
 var id_test_ajax = modal.find('input[name=id_testajax]').val();

 $.ajax({
  url: '',
  type: 'POST',
  data: {
   id_testajax: id_test_ajax,
   content_testajax: content_test_ajax
  },
  beforeSend: function(){
   modal.find('button').prop('disabled', true);
  }
 })
 .done(function(response) {
  if (response['status'] == 'OK') {
   modal.find('button').prop('disabled', false);
   modal.modal('hide');
   $('.isi').html(response['html']);
  };
 });
}

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

.
.
.
   <li>
    <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>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
        <a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
      </div>
    </div>
   </li>
.
.
.

Jangan lupa compile file composer, lihat disini pada bab composer.

Sehingga tampilan akhirnya akan terlihat seperti ini,

===DONE!!!===

Setelah pada tutorial sebelumnya kita sudah belajar tentang hide and show modal, tutorial kali ini akan mempelajari tentang operation CRUD pada Java Script menggunakan Ajax.

Tutorial kali ini akan jauh lebih sulit dibandingkan tutorial JS sebelumnya, tapi jika kita bisa memahami codenya maka kita sudah bisa dikatakan "PRO" dalam hal pengcodingan JS.

Jadi, berusahalah untuk memahami codenya.

Oke langsung saja kita praktekkan tutorialnya,

Pertama, silahkan migrate dulu table baru dengan nama java_script_6 jika lupa caranya bisa lihat disini, kemudian file migrate java_script_6 dengan code berikut,

<?php

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

class JavaScript6 extends Migration {

 /**
  * Run the migrations.
  *
  * @return void
  */
 public function up()
 {
  Schema::create('java_script_6', function($table){
     $table->increments('id');
     $table->text('test_ajax');
     $table->timestamps();
  });
 }

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

}

Buat juga modelnya untuk tabel java_script_6 dengan menambahkan file model JavaScript6.php pada path protected/app/models/ isi dengan code berikut,

<?php namespace Model;

use Illuminate\Auth\UserTrait;
use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableTrait;
use Illuminate\Auth\Reminders\RemindableInterface;
use \Eloquent;

class JavaScript6 extends Eloquent implements UserInterface, RemindableInterface {

 use UserTrait, RemindableTrait;

 /**
  * The database table used by the model.
  *
  * @var string
  */
 protected $table = 'java_script_6';

 /**
  * The attributes excluded from the model's JSON form.
  *
  * @var array
  */
 protected $hidden = array('password', 'remember_token');

}

Jika sudah, tabel tidak usah di seeder dan cek apakah tabel sudah dibuat atau belum dengan mengecek tabel pada localhost/phpmyadmin.

Selanjutnya, buat route baru 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');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
 Route::get('js5', 'Controller\belajar_js\Js5Controller@Index');
 Route::group(array('prefix' => 'js6'), function(){
  Route::get('', 'Controller\belajar_js\Js6Controller@Index');
  Route::post('', 'Controller\belajar_js\Js6Controller@addTestAjax');
 });
});
.
.
.

Kemudian buat file controller baru dengan nama, Js6Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut,

<?php namespace Controller\belajar_js;

use \View;
use \Response;
use \Request;

use Model\JavaScript6;

Class Js6Controller Extends \BaseController
{
 public function Index()
 {
  $test_ajaxs = JavaScript6::all();
  $content['test_ajaxs'] = $test_ajaxs; 

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

 public function addTestAjax()
 {
  if(Request::ajax()){
   $response['status'] = 'Table java_script_6 not found';
   $javascript6 = JavaScript6::all();

   if ($javascript6) {
    $response['status'] = 'OK';
    $addtext            = new JavaScript6;
    $addtext->test_ajax = \Input::get('test_ajax');
    
    $addtext->save();

    $test_ajaxs = JavaScript6::all();
    $content['test_ajaxs'] = $test_ajaxs; 

    $response['html'] = View::make('web/templates/javascript6')
          ->with('content', $content)
          ->render();
   } 
   return Response::json($response);
  }
  App::abort(404);
 }
}

Setelah itu buat file blade baru dengan nama java-script6.blade.php pada path protected/app/views/web/ isi dengan code berikut,

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 6 sebelum proses ajax</h4>
 <br>
 <label>Play with Ajax</label>
 <br><br>
 <button onclick="showModal(this)">Add text</button><br><br>
 @if($content['test_ajaxs'])
  @foreach($content['test_ajaxs'] as $test_ajax)
   <label>{{ $test_ajax['test_ajax'] }} </label>
  @endforeach
 @endif
</div>
@stop

@section('modal')
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="align-center">Header Modal</h4>
    </div>
    <div class="modal-body">
     <label>isi modal</label>
     <div class="form-group">
      <input type="text" name="test_ajax" class="form-control">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button onclick="addTestAjax(this)" type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Buat juga file js baru dengan nama js6.js pada path public/js/ isi dengan code berikut,

function showModal(button)
{
 var modal  = $('#test-modal');
 
 // Show Modal
 modal.modal({backdrop: 'static', keyboard: false});
}

function addTestAjax(button)
{
 var modal = $('#test-modal');
 var test_ajax = modal.find('input[name=test_ajax]').val();

 $.ajax({
  url: '',
  type: 'POST',
  data: {test_ajax: test_ajax},
  beforeSend: function(){
   modal.find('button').prop('disabled', true);
  }
 })
 .done(function(response) {
  if (response['status'] == 'OK') {
   modal.find('button').prop('disabled', false);
   modal.modal('hide');
   $('.isi').html(response['html']);
  };
 });
}

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

.
.
.
      <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>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
      </div>
.
.
.

Buat juga folder baru dengan nama templates pada path protected/app/views/web/ kemudian isi dengan file baru dengan nama javascript6.blade.php isi dengan code berikut,

<h4>Belajar java script 6 setelah proses ajax</h4>
<br>
<label>Play with Ajax</label>
<br><br>
<button onclick="showModal(this)">Add text</button><br><br>
@if($content['test_ajaxs'])
 @foreach($content['test_ajaxs'] as $test_ajax)
  <label>{{ $test_ajax['test_ajax'] }} </label>
 @endforeach
@endif

Jangan lupa compile file composer lihat disini pada bab composer.
Sehingga tampilan akhirnya akan tampak seperti ini,

===DONE!===

Kembali lagi ke Laravel, Tutorial kali ini akan membahas tentang membuat sebuah modal dengan JS.

Pembuatan modal ini akan menggunakan framework css dari bootstrap untuk mempermudah membuatnya.

Oke langsung saja kita praktekkan tutorialnya,

Pertama, buat route baru untuk project 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');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
 Route::get('js5', 'Controller\belajar_js\Js5Controller@Index');
});
.
.
.

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

<?php namespace Controller\belajar_js;

use \View;

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

Jangan lupa compile file composer lihat disini pada bab composer.

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

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 5</h4>
 <br>
 <label>Show and Hide Modal</label>
 <br><br>
 <button onclick="showModal(this)">Show Modal</button>
</div>
@stop

@section('modal')
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="align-center">Header Modal</h4>
    </div>
    <div class="modal-body">
     <label>isi modal</label>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Setelah itu buat file js baru dengan nama js5.js pada path public/js/ dan isikan code berikut,

function showModal(button)
{
 var modal  = $('#test-modal');
 
 // Show Modal
 modal.modal({backdrop: 'static', keyboard: false});
}

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

- 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>
        <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>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
      </div>
    </div>
.
.
.

- master.blade.php

<!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') }}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

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

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

 <!-- modal -->
 @section('modal')
 @show

 @include('layouts.web.footer')
</body>
</html>

Sehingga tampilannya akan tampak seperti ini,

Silahkan pahami sendiri codenya...

===DONE!===

Halo, Tutorial kali ini kita akan membuat sebuah project tentang operation file.

Dimana kita bisa membuat, membuka, mengedit, dan menyimpan sebuah file .txt,

Tutorial ini merupakan lanjutan dari tutorial sebelumnya,

Tutorial ini sangat penting karena operation file ini merupakan tutorial basic pada Visual Studio, dan untuk menuju ke tutorial berikutnya kita akan membuat sebuah project yang jauh lebih sulit, maka dari itu akan lebih mudah jika kita sudah mengerti terlebih dahulu tutorial basic ini.

Oke langsung saja kita praktekkan tutorialnya,,

Pertama, buat project baru namanya terserah anda kemudian silahkan buat design seperti ini,

Pada gambar diatas jangan lupa juga untuk menambahkan OpenFileDialog yang terdapat pada toolbox seperti ini,

Pada button "Open" isikan code berikut dengan cara klik 2 kali button,

.
.
.
        Dim openFile As StreamReader
        OpenFileDialog2.CheckFileExists = True
        OpenFileDialog2.CheckPathExists = True
        OpenFileDialog2.DefaultExt = "txt"
        OpenFileDialog2.FileName = ""
        OpenFileDialog2.Filter = "test|*.txt"
        OpenFileDialog2.Multiselect = False
        If OpenFileDialog2.ShowDialog = Windows.Forms.DialogResult.OK Then
            openFile = New StreamReader(OpenFileDialog2.FileName, True)
            Label1.Text = openFile.ReadToEnd
            Label1.Visible = True
            RichTextBox1.Visible = False
            openFile.Close()
        End If
.
.
.

Lihat code diatas sesuaikan nama OpenFileDialog nya dalam hal ini saya menggunakan nama OpenFileDialog2

Pada button "Edit" isikan code berikut dengan cara klik 2 kali button,

.
.
.
        Dim openFile As StreamReader
        If File.Exists(OpenFileDialog2.FileName) = False Then
            MessageBox.Show("Open file first")
        Else
            openFile = New StreamReader(OpenFileDialog2.FileName, True)
            RichTextBox1.Text = openFile.ReadToEnd
            Label1.Visible = False
            RichTextBox1.Visible = True
            openFile.Close()
        End If
.
.
.

Pada button "Save" isikan code berikut dengan cara klik 2 kali button,

.
.
.
        If File.Exists(OpenFileDialog2.FileName) = True Then
            If RichTextBox1.Text = "" And RichTextBox1.Visible = True Then
                MessageBox.Show("Cannot save, Text is empty")
            ElseIf RichTextBox1.Visible = False Then
                MessageBox.Show("Please click button Edit first")
            Else
                If Label1.Text = RichTextBox1.Text Then
                    MessageBox.Show("Nothing change")
                Else
                    Dim writeFile As New StreamWriter(OpenFileDialog2.FileName, False)
                    writeFile.Write(RichTextBox1.Text)
                    writeFile.Close()
                    MessageBox.Show("File Was Write")
                End If
            End If
        ElseIf File.Exists(OpenFileDialog2.FileName) = False Then
            MessageBox.Show("File txt not found, Open first")
        End If
.
.
.

Jangan lupa untuk menambahakan code Imports System.IO paling atas seperti ini

Imports System.IO
Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
.
.
.

Sehingga tampilannya akan tampak seperti ini.

Silahkan pahami sendiri codenya,

===DONE!===

Hello everyone,,

Kali ini saya akan memulai untuk tutorial baru tentang Visual Basic.

Visual Basic merupakan sebuah sofware yang dapat digunakan untuk membuat sebuh aplikasi console, windows, web dan lain-lain.

Pertama kali saya belajar Visual Basic adalah pada saat membuat sebuah aplikasi image processing untuk tugas skripsi, hehe..

Menurut saya belajar Visual Basic ini terbilang sangat mudah, karena pada Visual Basic itu sendiri ada banyak sekali fitur yang dapat kita manfaatkan,

Jika Anda pernah belajar Java dan Swift tentu anda akan semakin mudah untuk belajar Visual Basic.

Oke langsung saja kita praktekkan tutorialnya,,

Pada tutorial yang pertama ini kita akan berkenalan terlebih dahulu tentang fitur dari visual studio ini, Visual Basic yang saya gunakan saat ini adalah Visual Studio ultimate 2013.

Website ini tidak menyediakan software atau aplikasi bajakan!. Jika ingin mendownload silahkan download di website lain,

Pertama silahkan buka Visual Studio anda dan buat project baru seperti ini,

Dan langsung save saja

Selanjutnya buka window design anda jika belum terbuka klik disini

Silahkan buat design form seperti ini,

Untuk dapat membuatnya silahkan pergunakan toolbox yang ada disamping kiri window,

Jika sudah selesai, klik 2 kali checkbox1 pada design dan isikan code berikut

.
.
.
        If CheckBox1.Checked = True Then
            TextBox1.Enabled = True
        ElseIf CheckBox1.Checked = False Then
            TextBox1.Enabled = False
        End If
.
.
.

Perhatikan pada code diatas TextBox1 sudah diset propertiesnya enabled = false untuk mengatur properties lihat disini

Selanjutnya klik 2 kali CheckBox2 pada design dan isikan code berikut

.
.
.
        If CheckBox2.Checked = True Then
            TextBox2.Visible = True
        ElseIf CheckBox2.Enabled = False Then
            TextBox2.Visible = False
        End If
.
.
.

Pada code diatas TextBox2 sudah diset visible = false

Terakhir klik 2 kali button1 pada design dan isikan code berikut

.
.
.        
        If (CheckBox1.Checked = True And CheckBox2.Checked = True) Then
            MessageBox.Show("Semua sudah di check")
        Else
            MessageBox.Show("Semua CheckBox Harus Dicheck")
        End If
.
.
.

Tampilan seluruh codenya akan tampak seperti ini,

Public Class Form1
    Private Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
        If CheckBox1.Checked = True Then
            TextBox1.Enabled = True
        ElseIf CheckBox1.Checked = False Then
            TextBox1.Enabled = False
        End If
    End Sub

    Private Sub CheckBox2_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox2.CheckedChanged
        If CheckBox2.Checked = True Then
            TextBox2.Visible = True
        ElseIf CheckBox2.Enabled = False Then
            TextBox2.Visible = False
        End If
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If (CheckBox1.Checked = True And CheckBox2.Checked = True) Then
            MessageBox.Show("Semua sudah di check")
        Else
            MessageBox.Show("Semua CheckBox Harus Dicheck")
        End If
    End Sub
End Class

Sehingga saat anda Start dengan klik tombol ini,

Tampilan akhirnya akan menjadi seperti ini,

Mudah bukan?,,

Jika ada yang ingin ditanyakan silahkan contact us,

===DONE!===

menu

What is - Array

Laravel - Pagination

Laravel - Belajar bootstrap

React Native - Install React Native pada Windows

React Native - Create project React Native (Windows)

Laravel - Tutorial Java Script 7 (Expert Java Script)

Laravel - Tutorial Java Script 6 (Ajax)

Laravel - Tutorial Java Script 5 (Hide and Show Modal)

Visual Basic - Operation file (.txt)

Visual Basic - Introduction

About

Tags

Help