IT CODE TUTORIAL: Juni 2015

Senin, 29 Juni 2015

Install PostgreSQL On Ubuntu

Pada kesempatan kali ini akan dibahas mengenai install PostgreSQL pada operating sistem ubuntu. Setelah sebelumnya sangat sering dibahas mengenai database MySQL pada artikel kali ini akan dibahas mengenai database PostgreSQL.

pertama pastikan koneksi internet anda lancar, lalu buka terminal dan ketikan perintah berikut

sudo apt-get update && sudo apt-get install postgresql postgresql-contrib

Ketik Y untuk melanjutkan proses install, tunggu beberapa saat hingga proses int selesai. Jika sudah kita buat satu user baru yang berfungsi
sebagai oemilik database yang nantinya akan kita buat, jika pada MySQL kita mengenailnya dengan username root.

sudo adduser postgres_user

Perintah diatas berarti kita membuat satu user dengan nama postgres_user, tekan enter. Nanti akan muncul untuk mengisi password user tersebut, dan detail dari user tersebut. Silahkan isi sesuai dengan keinginan anda.

Selanjutnya yang harus dilakukan adalah membuat ROLE atau akses user terhadap user yang tadi kita buat. Yang harus dilakukan adalah masuk ke root / admin postgres, jika pada MySQL usernya root pada PostgreSQL menggunakan user postgres, ketikan perintah berikut

sudo su - postgres

lalu ketikan perintah dibawah ini untuk masuk ke PostgreSQL,

psql

jika pada mysql untuk menuliskan Query menggunakan perintah berikut

mysql -u root -p

jika pada postgres cukup menuliskan psql

tahap selanjutnya pembuatan ROLE password dan database untuk user postgres_user

CREATE USER postgres_user WITH PASSWORD 'password';
CREATE DATABASE my_postgres_db OWNER postgres_user;

Query diatas berarti kita membuat password untuk user postgres_user dengan password nya adalah password dan membuat database dengan nama my_postgres_db dengan catatan database tersebut hanya bisa di akses oleh root postgres dan postgres_user.

Baik cukup sekian tutorial mengenai install PostgreSQL di Ubuntu

Selamat mencoba & Happy Coding

Sabtu, 27 Juni 2015

Ajax Before Send With Form Serialize And Bootstrap

Pada kesempatan kali ini kita akan membahas bagaimana menggunakan function BeforeSend dari ajax, jadi konsepnya ketika kita akan memasukan sebuah data ke database sebelum proses itu selesai maka akan muncul loading terlebih dahulu dan ketika proses simpan tersebut selesai data akan langsung masuk ke database.

mari kita simak langkah langkah nya, ikuti langkah berikut dengan tertib yaa heee,

1. Pertama kamu harus download terlebih dahulu Bootstrap.js || Bootstrap.css || jquery.js
2. Setelah file diatas tersedia, buat lah sebuah database dengan nama ajaxbeforesend
3 Buat sebuah tabel bernama biodata dengan fields nya id, nama, alamat
4. Siapkan sebuah file bernama form.php lalu isikan kode berkut

<!DOCTYPE html>
<html>
<head>
<title>Ajax Before Send With Form Serialize And Bootstrap</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="boostrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Callback handler for form submit event
$("#myform").submit(function(e)
{

var formObj = $(this);
var formURL = formObj.attr("action");
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData:false,
beforeSend: function (){
$("#loading").show(1000).html("<img src='load.gif' height='50'>");
},
success: function(data, textStatus, jqXHR){
$("#result").html(data);
$("#loading").hide();
},
error: function(jqXHR, textStatus, errorThrown){
}
});
e.preventDefault(); //Prevent Default action.
e.unbind();
});

});
</script>
</head>
<body>

<div class="container">
<h3>Tambah Data</h3>
<form method="post" id="myform" action="simpan.php">
<input type="text" placeholder="Nama" class="form-control" name="nama"/><br>
<input type="text" class="form-control" placeholder="Alamat" name="alamat" /><br>
<input type="submit" value="Simpan" class="btn btn-primary" />
</form>

<center><div id="loading"></div></center><br>
<div id="result"></div>
</div>
</body>
</html>

5. Setelah form.php tersiapkan lalu siapkan juga file action simpan.php nya, isi koding nya seperti dibawah ini

<?php
mysql_connect('localhost','root','');
mysql_select_db('ajaxbeforesend');

$nama = $_POST['nama'];
$alamat = $_POST['alamat'];

$query = mysql_query("insert into biodata (nama,alamat) values ('$nama', '$alamat')");

if($query){
echo '<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><strong>Sukses </strong> data berhasil di tambahkan </div>';
}else{
echo '<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><strong>Gagal </strong> terjadi kesalahan </div>';
}
?>

6. Terakhir silahkan kamu running latihan tersebut. dan kira kira hasil nya seperti gambar berikut

Sebenarnya ketika kita klik simpan, sebelum muncul alert sukses tersebut terdapat image loading terlebih dahulu, cuman karna begitu cepat ngilang dia nya.

tapi tenang jangan khawatir , kamu bisa mendowload hasil latihan kita diatas disini

https://www.dropbox.com/s/xtl93y2e3bt4acg/serialize.rar?dl=0

Terimakasiiihh n Happy kode gays , #BerkahRamadhan :D

Rabu, 24 Juni 2015

Seeding Laravel

Setelah pada artikel beberapa waktu lalu dibahas mengenai migrate laravel, pada bahasan kali ini kan dibahas mengenai seeding, Perbedaannya jika pada migrate kita membuat table sedangkan seeding membuat record atau insert data untuk table yang kita tuju.

Agar tidak membingungkan seilahkan anda baca tutorial sebelumnya mengenai migrate

Silahan buka file DatabaseSeeder.php pada folder database/seeds , anda akan menemukan code seperti berikut

<?php

use Illuminate\Database\Seeder;
use Illuminate\Database\Eloquent\Model;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Model::unguard();

        // $this->call('UserTableSeeder');

        Model::reguard();
    }
}

modifikasi file tersebut menjadi seperti berikut

<?php

use Illuminate\Database\Seeder;
use Illuminate\Database\Eloquent\Model;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
       DB::table('berita')->insert([
            'judul' => "contoh penggunaan seeder",
        ]);
    }
}

penjelasan :

DB::table('berita')->insert([
            'judul' => "contoh penggunaan seeder",
        ]);

kita akan menginputkan sebuah judul dengan isian data contoh penggunaan seeder, tahap selanjutnya adalah buka cmd / terminal anda untuk mengirimkan data tersebut

ketika perintah berikut


php artisan db:seed

lalu silahkan cek table berita

seperti itulah kegunaan dari seeder laravel, semoga bermanfaat dan selamat mencoba

Happy Coding guys

Javascript Loading Screen While Page Loads

Mungkin anda jenuh ketika mengunjungi sebuah page dan loadingnya sangat lama, ketika loading tersebut pula halaman yang anda akses blank alias tidak menampilkan apapun. Mungkin lebih UI ketika loading kita menampilkan sebuah loading notification, dimana itu memberitahukan bahwa halaman masih proses load.

Pada bahasan kali ini akan di bahas cara membuat load image ketika halaman diload, konsepnya kita mempunya sebuah gambar gif, dimana ketika halaman masih loading, gambar tersebut akan ditampilkan dan ketika halaman tersebut selesai diload maka gambar akan menghilang dan konten page akan ditampilkan, berikut sample code nya

example.html

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">

  function onReady(callback) {
      var intervalID = window.setInterval(checkReady, 1000);

      function checkReady() {
          if (document.getElementsByTagName('body')[0] !== undefined) {
              window.clearInterval(intervalID);
              callback.call(this);
          }
      }
  }

  function show(id, value) {
      document.getElementById(id).style.display = value ? 'block' : 'none';
  }

  onReady(function () {
      show('page', true);
      show('loading', false);
  });

 </script>
 <style type="text/css">
  body {
      background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
      font-family:"Brush Script MT", cursive;
  }
  h1 {
      font-size: 2em;
      margin-bottom: 0.2em;
      padding-bottom: 0;
  }
  p {
      font-size: 1.5em;
      margin-top: 0;
      padding-top: 0;
  }
  #page {
      display: none;
  }
  #loading {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100vw;
      height: 100vh;
      background-color: rgba(192, 192, 192, 0.5);
      background-image: url("http://i.stack.imgur.com/MnyxU.gif");
      background-repeat: no-repeat;
      background-position: center;
  }
 </style>
</head>
<body>
<div id="page">
     <h1>The standard Lorem Ipsum passage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>


</body>
</html>

Berikut screen capture dari hasil code diatas

okay seperti itulah cara membuat loading image dengan javascript, semoga bermanfaat dan selamat mencoba

Happy Coding Guys

Send Plain Text & HTML To Email

Beberapa hari lalu saya menemukan kasus untuk mengirim email yang berisikan gambar, memang terkirim hanya saja masuk junk / spam. Setelah mencari dan mencari, akhirnya menemukan cara mudah mengirim plain text dan HTML ke email. Sebenernya sama saja menggunakan mail to, hanya saja ada modifikasi pada header nya.

Berikut contoh mengirim plain text dan HTML menggunkan mail to

send.php


<?php



$message = '<html><body>';
$message.='<img src="http://css tricks.com/examples/WebsiteChangeRequestForm/images/wcrf-header.png" alt="Website Change Request" />';
$message .= 'Testing Email';
$message .= "</body></html>";
   
$to = 'xxxxx@gmail.com';
   
$subject = 'Send Plain Text & HTML Example';
   
   $headers = "From: xxxx@gmail.com \r\n";
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


            if (mail($to, $subject, $message, $headers)) {
            echo "Email sent";
            } else {
           echo "Email not sent";
            }
           
?>

Kurang lebih seperti itu cara mengirim plain text dan html menggunakan fungsi mail()

Semoga bermanfaat dan selamat mencoba''

Happy Coding

Selasa, 23 Juni 2015

DATEDIFF MySQL,PHP & AJAX Example

Mungkin anda pernah menemukan sebuah kasus untuk melihat selisih tanggal, contoh selisih hari dari tanggal 2015-06-24 dengan 2015-06-23 itu berapa hari ? MySQL menyediakan fungsi yang dapat anda gunakan untuk mendapatkan selisih hari dari kedua tanggal yang anda buat.

Pertama buat database dengan nama notifikasi

Lalu buat table seperti berikut

CREATE TABLE IF NOT EXISTS `masa_aktif` (
`tanggal` date NOT NULL,
`status` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Lalu isi dengan menuliskan query berikut

INSERT INTO `masa_aktif` (`tanggal`, `status`) VALUES
('2015-06-23', 'aktif');

Pada kasus ini kita akan membuat sebuah status aktif dan tidak aktif, status aktif jika range atau jarak antara tanggal ini tidak melebihi tanggal aktif. Contoh pada query diatas terdapat tanggal 2015-06-23 artinya jika tanggal yang kedua melebihi tanggal tersebut maka status akan otomatis berubah jadi non aktif.

Untuk proses checking nya akan digunakan ajax sebagai back door eksekusi querynya.

Langsung saja pertama buat koneksinya terlebih dahulu

koneksi.php

<?php
$host = "localhost";
$username = "root";
$password = "";
$db_name = "notifikasi";
$mysqli = new mysqli($host, $username, $password, $db_name);
if(mysqli_connect_errno()) {
echo "Error: Could not connect to database.";
exit;
}
?>

Lalu buat file php untuk proses panggil selisih tanggalnya

cek.php

<?php
include "koneksi.php";
$query = "SELECT DATEDIFF(CURRENT_DATE, tanggal) as selisih FROM masa_aktif";
$result = $mysqli->query($query);
$num_results = $result->num_rows;
if( $num_results > 0){
$row = $result->fetch_assoc();
extract($row);
echo $selisih;
$update = "update masa_aktif set status ='non aktif'";
$mysqli->query($update);
}else{
echo "Data Kosong";
}
?>

CURRENT_DATE digunakan untuk mendapatkan tanggal hari ini, jadi artinya hari ini tanggal 2015-06-24 dan tanggal aktif 2015-06-23 selisih dari kedua hari tersebut adalah 1, jika 1 artinya sudah melebihi dari tanggal aktif , ketika selisih tersebut 1 maka query update akan dilakukan merubah status menjadi non aktif.

Lanjut dengan membuat file home page nya yang disertai dengan ajax.

index.php

<html>
<head>
<title>Notifikasi</title>
<link rel="stylesheet" href="gaya.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function cek(){
$.ajax({
url: "cek.php",
success: function(msg){
//jika file cek.php sukses di akses akan menampilkan text berikut
$("body").html("Silahkan cek table masa aktif, apakah status sudah terubah otomatis atau tidak :D");
}
});
//cek tiap 3 detik karena 1000= 1 detik
var waktu = setTimeout("cek()",3000);
}
//untuk menjalankan fungsi cek()
cek();
</script>
</head>
<body>
</body>
</html>

Silahkan anda running file index.php

berikut gambar data sebelum saya mengakses file index.php

Tampilan halaman index

Silahkan cek kembali data anda

Yap berhasil !! data pun telah berubah :D semoga bermanfaat dan Happy Coding Ramadhan

Senin, 22 Juni 2015

Notification Like Facebook & Twitter With Growl

Kita sudah tidak asing dengan notifikasi facebook atau twitter, yang ketika ada komen atau twit akan muncul pada bagian kiri bawah notifikasi. Pada kali ini akan dibahas cara membuat nya dengan menggunakan library Growl.

Anda bisa mengunduh library javascript nya pada link berikut https://github.com/ksylvest/jquery-growl. Jika sudah mari kita buat contoh sederhana membuat notifikasi

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>jQuery Growl</title>
<link href='stylesheets/jquery.growl.css' rel='stylesheet' type='text/css'>
<link href='stylesheets/sample.css' rel='stylesheet' type='text/css'>
<script src='javascripts/jquery.js' type='text/javascript'></script>
<script src='javascripts/jquery.growl.js' type='text/javascript'></script>
<script src='javascripts/sample.js' type='text/javascript'></script>
</meta>
</head>
<body>
<section class='example'>
<p>
<ul>
<li>
<a class='error' href='#'>Error!</a>
</li>
<li>
<a class='notice' href='#'>Notice!</a>
</li>
<li>
<a class='warning' href='#'>Warning!</a>
</li>
</ul>
</p>
</section>
</body>
</html>

Pastikan file css dan js yang sudah anda download letaknya sesuai dengan code diatas. Silahkan anda save dan jalankan file index.html

berikut beberapa contoh notifikasi

Selamat mencoba dan semoga bermanfaat

Happy Coding

Jumat, 19 Juni 2015

Migrate Laravel For Create Table

Laravel menyediakan satu fitur yang cukup menarik, yakni pembuatan table dengan menggunakan perintah migrate. Sebelum masuk ke latihan migrate, buat terlebih dahulu database yang akan digunakan untuk pembuatan table.

(Saya membuat database dengan nama latihan)

Jika database telah dibuat, silahkan buka command line atau terminal anda, lalu ketika perintah berikut

php artisan make:migration berita

Gambar diatas menjelaskan bahwa migrate berhasil, lalu buka folder database/migration anda akan menemukan file sesuai dengan nama migrate, buka file tersebut

<?php

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

class Berita extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        //
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

anda akan menemukan code seperti diatas, modifikasi code berikut sehingga menjadi seperti berikut

<?php

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

class Berita extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
     public function up()
    {
        Schema::create('berita', function (Blueprint $table) {
            $table->increments('id');
            $table->string('judul');
            $table->string('isi');
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

Sebelum mengeksekusi, kita harus mengatur konfigurasi koneksi, buka file .env , modifikasi code berikut menjadi seperti berikut

    APP_ENV=local
APP_DEBUG=true
APP_KEY=wv8fcUG8nIGnQeY2rgJmaXXOU7C3rV06

DB_HOST=localhost
DB_DATABASE=latihan
DB_USERNAME=root
DB_PASSWORD=

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

Jika sudah yang terakhir kita akan mengeksekusi code migrate yang tadi menjadi table, buka kembali terminal, ketikan perintah berikut

php artisan migrate

Jika tidak ada error silahkan cek database anda apakah table telah berhasil

yap table berhasil dibuat, pada gambar terdapat field created_at dan updated_at itu karena pada migrate file nya kita menulis baris berikut

$table->timestamps();

Seperti itulah cara pembuatan table dengan menggunakan perintah migrate

Semoga bermanfaat & Happy Coding Laravel

Blade Template Laravel

Setelah sebelumnya sempat sedikit dibahasa mengenai template khas dari laravel, mungkin sekarang akan kita kupas perbedaan dari blade template itu sendiri, Kelebihan dari blade template yakni dari segi penulisan code HTML menjadi lebih sederhana, berikut contoh nya

Code yang bukan blade template

<ul>
    <?php foreach($posts as $post): ?>
    <li> <?php echo $post->title ?> </li>
    <?php endforeach; ?>
</ul>

Code blade template

<ul>
    @foreach($posts as $post)
    <li> {{ $post->title }} </li>
    @endforeach
</ul>

kita sudah tidak menggunakan tanda <?php lagi ketika menggunakan blade template, dan untuk echo kita rubah dengan tanda {{ }}. Menarik bukan ? ada beberapa contoh code lagi

Kondisi blade template

@if (count($posts) === 1)
    Ada satu tulisan baru
@elseif (count($posts) > 1)
    Ada beberapa tulisan baru
@else
    Tidak ada tulisan baru
@endif

Lebih sederhana dan ya sesuai dengan motto dari Laravel sendiri Expressive Code & Beautiful Code

Semoga bermanfaat & Happy Coding

Chat Pop Up Client With Zopim

Mungkin ketika anda mengunjungi online store atau e-commerce lainnya, Tidak jarang anda melihat chat untuk mempermudah pengunjung bertanya-tanya mengenai produk yang di jual. Beberapa hari lalu saya surfing mengenai chat tersebut.

Sebetulnya bisa saja kita membuat itu sendiri, akan tetapi ada widget yang bisa kita gunakan untuk mempermudah alias ga pusing ngoding, the named is Zopim Chat , berikut link nya https://www.zopim.com.

Anda tinggal daftar saja, lalu konfirmasi melalui email dan anda akan diberikan code javascript untuk widget nya. Berikut hasil jadi dari widget Zopim Chat

Ada perintah untuk menyisipkan code javascript daintier head, berikut sample code yang saya dapatkan ketika selesai mendaftar

<script type="text/javascript">

window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=

d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.

_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");

$.src="//v2.zopim.com/?36UdY8Xe78Tzd0KKLuXspzHco7Yj9ggT";z.t=+new Date;$.

type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");

</script>

cukup mudah kan ? Semoga bermanfaat

Happy Coding Guys

Rabu, 17 Juni 2015

Routing Laravel & Blade Template

Setelah dijelaskan pada tutorial sebelumnya mengenai cara installasi Laravel, Pada kali ini akan dibahas cara pembuatan Routing di Laravel. Sama halnya dengan framework lain, Routing pun ada pada framework Laravel. Pada bahasan mengenai Routing Codeigniter telah dibahas secara singkat pengertian dan cara penerapannya.

Sedikit menceritakan fungsi dari Routing, Routing digunakan untuk mendaftarkan page. Artinya jika kita ingin membuat page baru agar dapat bisa di akses, harus didaftarkan pada Routing, buka file app/Http/routes.php (letak file routes.php).

Anda akan menemukan baris code seperti berikut

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

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

tanda / artinya address root atau alamat default ketika kita mengakses localhost/myproject, lalu code return view('welcome') artinya meload file view welcome.blade.php

Nah loh kenapa extention filenya ada .blade ? Yap blade merupakan template yang menjadi ciri khas dari laravel, untuk lebih lanjutnya akan dijelaskan pada tutorial selanjutnya.

Lalu dimana letak file welcome.blade.php tersebut ? pada folder resources/views

silahkan buka

welcome.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
margin-bottom: 40px;
}
.quote {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
<div class="quote">{{ Inspiring::quote() }}</div>
</div>
</div>
</body>
</html>

anda akan menemukan baris code seperti diatas, mari kita modifikasi code tersebut menjadi seperti berikut

<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
margin-bottom: 40px;
}
.quote {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5 By Your Name</div>
<div class="quote">{{ Inspiring::quote() }}</div>
</div>
</div>
</body>
</html>

Lalu anda save, lalu kemudian jalankan kembali dengan mengetikan perintah php artisan serve, maka hasil dari code yang kita modifikasi seperti berikut

Selanjutnya mari kita coba dengan membuat view baru dengan nama test.blade.php

test.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: #B0BEC5;
display: table;
font-weight: 100;
font-family: 'Lato';
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
margin-bottom: 40px;
}
.quote {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Ini halaman view test</div>
</div>
</div>
</body>
</html>

lalu mari buat routing baru untuk meload file view tersebut, buka kembali file routes.php, modifikasi menjadi seperti berikut

routes.php

<?php
/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/test', function () {
return view('test');
});

kemudian save lalu ketikan kembali perintah php artisan serve dan akses pada browser http://localhost:8000/test, maka akan menampilkan halaman seperti gambar dibawah ini

Seperti itulah kurang lebih proses Routing Laravel, semoga bermanfaat & Happy Coding Guys

Print Page With Javascript

Mungkin anda tidak asing dengan print page, pada bahasan kali ini akan dikupas mengenai bagaimana cara membuat print page dengan javascript, dengan menggunakan code berikut

window.print();

berikut contoh code nya

<input type="button" onclick="cetak()" value="Cetak"/>
<script>
function cetak(){
window.print();
}
</script>

berikut hasil dari code diatas

Seperti itulah cara membuat print page menggunakan Javascript, semoga bermanfaat & Happy Coding Guys

Welcome Laravel (Install laravel)

Laravel ? ya framework yang sedang hangat-hangatnya jadi perbincangan karena framework ini sangat popular hingga saat ini, karena banyak nya fitur yang disediakan dan penulisan code yang expressive.

Ada beberapa syarat jika kita ingin menggunakan framework ini, berikut beberapa syarat yang perlu dilakukan untuk menginstall Laravel

1. PHP >= 5.5.9, artinya PHP yang anda gunakan tidak boleh kurang dari versi yang ditentukan laravel

2. Anda harus mengenablekan mcrypt (link untuk mengaktifkan di ubuntu : http://askubuntu.com/questions/350942/cannot-get-mcrypt-for-php5 ) & ( link untuk mengaktifkan di windows http://www.myoddweb.com/2010/11/18/install-mcrypt-for-php-on-windows/ )

3. Install Composer , composer digunakan untuk mengupdate fitur laravel mulai dari mengambil fitur yang akan digunakan. Berikut link untuk menginstall composer https://getcomposer.org/doc/00-intro.md

4. Pastikan internet ada :D, karena lebih nikmat ketika menggunakan composer (perlu internet) dibanding copas file seperti framework codeigniter, dan ketika menggunakan composer code yang anda tambahkan biasa merupakan code terupdate :D

langsung saja berikut cara menginstall Laravel, check this out :)

1. Buka terminal / command line, ketikan perintah berikut composer create-project laravel/laravel myproject prefer-dist

proses cloning, tunggu hingga selesai bersabarlah, kira-kira memakan waktu sekitar 5 menit

2. Setelah selesai, jika anda ingin menjalankan laravel ketikan perintah berikut

cd myproject

php artisan serve

untuk mengaksesnya http://localhost:8000

Dan yap laravel telah berhasil terinstall, selamat datang Laravel the beauty code.

Semoga bermanfaat dan selamat mencoba

Happy Coding

Download

Senin, 29 Juni 2015

Sabtu, 27 Juni 2015

Rabu, 24 Juni 2015

Selasa, 23 Juni 2015

Senin, 22 Juni 2015

Jumat, 19 Juni 2015

Rabu, 17 Juni 2015