Memulai Laravel PHP, Membuat Aplikasi Daftar Kota

Aplikasi akan memunculkan halaman web yang berisikan daftar kota sekitar Jakarta yang dikenal dengan Jabodetabek. Setiap item kota terdapat link yang mengarah ke lokasi peta kota tersebut. Langkah pembuatan aplikasi mulai dari instalasi Laravel, membuat routing dan view, sampai dengan hasil akhir dijalankan di web browser.

Instalasi Laravel

Laravel (http://laravel.com) menggunakan Composer (https://getcomposer.org) untuk instalasi dan pengelolaan dependency, pastikan Composer telah terinstal di komputer. Jika belum, instalasi dapat dilakukan melalui terminal (pada sistem operasi berbasis *nix):

curl -sS https://getcomposer.org/installer | php

Jika kamu menggunakan Windows, installer Composer dapat diunduh melalui https://getcomposer.org/Composer-Setup.exe. Informasi unduh Composer dapat dilihat langsung dari https://getcomposer.org/download/.

Buat project baru melalui Composer dengan menggunakan perintah berikut:

composer create-project laravel/laravel laravel-project --prefer-dist

Perintah di atas akan mengunduh instalasi Laravel dan membuat folder “laravel-project”. Nantinya, nama “laravel-project” dapat diganti sesuai dengan project yang ingin dibuat.

Alternatif instalasi lain adalah dengan mengunduh repositori Laravel dari https://github.com/laravel/laravel/archive/master.zip. Ekstrak file zip hasil unduhan, lalu masuk ke folder hasil ekstrak (folder laravel-master), lalu jalankan perintah:

composer install

Catatan: Saat tulisan ini dibuat menggunakan Laravel 4.2 dan membutuhkan versi PHP 5.4+.

Menjalankan Laravel

Laravel menggunakan built-in development server, sehingga saat pengembangan aplikasi tidak memerlukan web server seperti Apache atau Nginx.

Masuk ke folder instalasi Laravel dan jalankan perintah berikut:

php artisan serve

Secara default, laravel menjalankan host localhost dengan port 8000, arahkan alamat http://localhost:8000 pada browser. Host dan port dapat diubah dengan menambahkan parameter –host dan –port, berikut perintah dengan parameter tersebut:

php artisan serve --host=0.0.0.0 --port=8080

Berikut hasil screenshot ketika Laravel dijalankan:

laravel-hello

Struktur Laravel

Kode aplikasi Laravel berada pada folder “app”, di dalamnya terdapat folder yang sering dipakai dalam memprogram aplikasi seperti folder “controllers”, “views”, dan “models”. Selain itu, folder “config” banyak digunakan untuk melakukan konfigurasi kode aplikasi.

File “app/routes.php” mendefinisikan berbagai routing di aplikasi. Berikut adalah route yang didefinisikan saat instalasi Laravel:

Route::get('/', function()
{
    return View::make('hello');
});

Method Route::get() digunakan untuk mendefinisikan route, sedangkan di dalam closure terdapat baris View::make(‘hello’) digunakan untuk memanggil file view “hello.php” yang berada di folder “app/view”. Dari kode di atas, ketika route di arahkan ke “/” (setelah http://localhost:8000), maka memanggil file view “app/view/hello.php”.

Berikut adalah kode view dibuka menggunakan editor:

laravel-hello-view-code

Membuat Routing & View Aplikasi

Untuk memunculkan halaman yang berisikan daftar kota, route yang digunakan adalah “/cities”. Tambahkan kode berikut di dalam file “app/routes.php”:

...
Route::get('/cities', function()
{
    return View::make('city');
});

Buat file view “city.php” di dalam folder “app/views”, isikan template dasar di file view tersebut:

<!doctype html>
<html>
<head>
  <title>Daftar Kota</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <style>
    .container {
        padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Daftar Kota Jabodetabek</h1>

  </div>
</body>
</html>

Untuk sementara, bentuk aplikasi ketika dijalankan adalah sebagai berikut:

laravel-route-city

Catatan: Bentuk halaman menggunakan CSS dari Bootstrap yang langsung diambil dari CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

Membuat Daftar Kota di Dalam View

Langkah selanjutnya adalah mengembangkan view. Daftar kota dikelompokkan dalam bentuk array PHP. Tambahkan kode PHP yang berisikan variabel array $cities di bawah tag <h1>Daftar Kota Jabodetabek</h1>, seperti kode di bawah:

...
<h1>Daftar Kota Jabodetabek</h1>
<?php
$cities = [
    ['name' => 'Jakarta', 'url' => 'https://goo.gl/maps/ugdFU'],
    ['name' => 'Bogor', 'url' => 'https://goo.gl/maps/ExzYT'],
    ['name' => 'Depok', 'url' => 'https://goo.gl/maps/30JxC'],
    ['name' => 'Tangerang', 'url' => 'https://goo.gl/maps/Yn0yZ'],
    ['name' => 'Bekasi', 'url' => 'https://goo.gl/maps/T17QQ']
];
?>
...

Daftar kota tersebut dikumpulkan ke dalam List HTML dengan menggunakan tag <ul> (unordered list) dan menggunakan style dari List Group Bootstrap. Tambahkan di bawahnya kode berikut:

 ...
<ul class="list-group">
    <?php foreach ($cities as $city): ?> 
    <li class="list-group-item">
        <a href="<?=$city['url']?>" target="_blank">
            <?=$city['name']?>
        </a>
    </li>
    <?php endforeach; ?>
</ul>
...

Berikut hasil akhir aplikasi ketika di jalankan di browser:

laravel-start-cities

Ketika link masing-masing kota diklik akan menuju ke peta masing-masing kota pada Google Maps.

Hasil modifikasi kode “app/routes.php” lengkapnya adalah sebagai 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 Closure to execute when that URI is requested.
|
*/

Route::get('/', function()
{
    return View::make('hello');
});

Route::get('/cities', function()
{
    return View::make('city');
});

Sedangkan berikut adalah kode lengkap file view “app/view/city.php”:

<!doctype html>
<html>
<head>
  <title>Daftar Kota</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <style>
    .container {
        padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Daftar Kota Jabodetabek</h1>
    <?php
    $cities = [
        ['name' => 'Jakarta', 'url' => 'https://goo.gl/maps/ugdFU'],
        ['name' => 'Bogor', 'url' => 'https://goo.gl/maps/ExzYT'],
        ['name' => 'Depok', 'url' => 'https://goo.gl/maps/30JxC'],
        ['name' => 'Tangerang', 'url' => 'https://goo.gl/maps/Yn0yZ'],
        ['name' => 'Bekasi', 'url' => 'https://goo.gl/maps/T17QQ']
    ];
    ?>
    <ul class="list-group">
        <?php foreach ($cities as $city): ?> 
        <li class="list-group-item">
            <a href="<?=$city['url']?>" target="_blank">
                <?=$city['name']?>
            </a>
        </li>
        <?php endforeach; ?>
    </ul>
  </div>
</body>
</html>

Kamu dapat menambahkan daftar kota lain ke item baru di array atau mengembangkan view sesuai kebutuhan kamu. #HappyCoding

Credit gambar header: Google Maps

One thought on “Memulai Laravel PHP, Membuat Aplikasi Daftar Kota

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *