Artikel ini dirunut berdasarkan Jobeet Tutorial, yang dibuat oleh Fabien Potencier, untuk Symfony 1.4.
Customize Job controller
Hari ini kita akan menyesuaikan job controller yang kita buat kemarin. Kita sudah memiliki semua kebutuhan kode untuk pembuatan proyek, antara lain yaitu:- Halaman untuk menampilkan list lowongan pekerjaan
- Halaman untuk membuat lowongan baru
- Halaman untuk mengupdate lowongan yang sudah ada
- Halaman untuk menghapus lowongan
Meskipun semua kebutuhan project kita sudah lengkap, tetapi aplikasi kita belum memiliki design template, untuk itu kita akan membuat templatenya sekarang.
Konsep MVC dalam Symfony 2
Untuk saat ini konsep untuk pengelolaan kode dalam sebuah framework yang paling populer adalah MVC (Model View Controller) begitu juga Symfony 2. Pola ini membagi kode kita menjadi tiga lapisan yaitu:- Model merupakan pusat semua proses logic dan pengolahan data. Semua manipulasi data dengan database akan di tampung di sini. Di Symfony 2 model terletak di folder sandbox/src/Ibw/JobeetBundle/Entity.
- View merupakan tempat untuk menampilkan olahan data ke user. Disinilah kita akan meletakan templatenya. Di Symfony 2 template tergenerate oleh Twig template engine. Semua komponen view terletak di dalam folder sandbox/src/Ibw/JobeetBundle/Resources/views
- Controller potongan kode yang menghubungkan antara model dan view. Controller akan mengambil data dari model dan mengirimnya ke view. Di awal tutorial ini dalam Symfony 2 semua permintaan page diatur oleh front controller yaitu app.php dan app_dev.php controller ini akan mengirimkan tugas ke controller-controller yang ada dalam aplikasi kita
Layout
Agar tidak terjadi begitu banyak duplikasi kode dalam tampilan kita membagi konten dalam tiga bagian yaitu: header, content, footer. Untuk itu kita akan membuat global template yang kita berinama layout.html.twig. Buat file layout.html.twig di dalam folder src/Ibw/JobeetBundle/Resources/views. Lalu tambahkan kode ini:src/Ibw/JobeetBundle/Resources/views/layout.html.twig
<!DOCTYPE html>
<html>
<head>
<title>
{% block title %}
Jobeet - Your best job board
{% endblock %}
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/ibwjobeet/css/main.css') }}" type="text/css" media="all" />
{% endblock %}
{% block javascripts %}
{% endblock %}
<link rel="shortcut icon" href="{{ asset('bundles/ibwjobeet/images/favicon.ico') }}" />
</head>
<body>
<div id="container">
<div id="header">
<div class="content">
<h1><a href="{{ path('ibw_job') }}">
<img src="{{ asset('bundles/ibwjobeet/images/logo.jpg') }}" alt="Jobeet Job Board" />
</a></h1>
<div id="sub_header">
<div class="post">
<h2>Ask for people</h2>
<div>
<a href="{{ path('ibw_job') }}">Post a Job</a>
</div>
</div>
<div class="search">
<h2>Ask for a job</h2>
<form action="" method="get">
<input type="text" name="keywords" id="search_keywords" />
<input type="submit" value="search" />
<div class="help">
Enter some keywords (city, country, position, ...)
</div>
</form>
</div>
</div>
</div>
</div>
<div id="content">
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="flash_notice">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('error') %}
<div class="flash_error">
{{ flashMessage }}
</div>
{% endfor %}
<div class="content">
{% block content %}
{% endblock %}
</div>
</div>
<div id="footer">
<div class="content">
<span class="symfony">
<img src="{{ asset('bundles/ibwjobeet/images/jobeet-mini.png') }}" />
powered by <a href="http://www.symfony.com/">
<img src="{{ asset('bundles/ibwjobeet/images/symfony.gif') }}" alt="symfony framework" />
</a>
</span>
<ul>
<li><a href="">About Jobeet</a></li>
<li class="feed"><a href="">Full feed</a></li>
<li><a href="">Jobeet API</a></li>
<li class="last"><a href="">Affiliates</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Twig Block
Twig sebagai default template engine di Symfony 2, kita dapat mendefinisikan block sebagai mana yang kita definisikan barusan. Twig block bisa memiliki konten default (sebagai contoh lihat blok title). Yang bisa direplace atau mengambil dari template turunan seperti yang akan kamu lihat sesaat lagi. Untuk menggunakan template layout tersebut kita harus mengedit (index, edit, new dan show dari src/Ibw/JobeetBundle/Resources/views/Job/) untuk mengambil template layout sebagai templatenya. Replace kode di file tersebut dengan kode dasar berikut ini:index, edit, new dan show dari src/Ibw/JobeetBundle/Resources/views/Job/
{% extends 'IbwJobeetBundle::layout.html.twig' %}
{% block content %}
<!-- original body block code goes here -->
{% endblock %}
Penempatan css, image, dan javascript
php app/console assets:install web --symlink
Untuk menambahkan file css kita bisa memanggilnya dengan cara menambahkan baris berikut ke dalam file index dan show:
src/Ibw/JobeetBundle/Resources/views/Job/index.html.twig
{% extends 'IbwJobeetBundle::layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/ibwjobeet/css/jobs.css') }}" type="text/css" media="all" />
{% endblock %}
<!-- rest of the code -->
src/Ibw/JobeetBundle/Resources/views/Job/show.html.twig
{% extends 'IbwJobeetBundle::layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/ibwjobeet/css/job.css') }}" type="text/css" media="all" />
{% endblock %}
<!-- rest of the code -->
Aksi halaman Home
Semua aksi merupakan representasi dari method yang ada di controller, untuk JobHomepage class yang digunakan adalah JobController dan methodnya adalah IndexAction. Method tersebut akan mengambil semua data lowongan lalu menampilkannya ke view index.src/Ibw/JobeetBundle/Controller/JobController.php
// ...
public function indexAction()
{
$em = $this->getDoctrine()->getManager();
$entities = $em->getRepository('IbwJobeetBundle:Job')->findAll();
return $this->render('IbwJobeetBundle:Job:index.html.twig', array(
'entities' => $entities
));
}
// ...
Mari kita perhatikan di method index tersebut menggunakan doctrine entity manager untuk proses pengelolaan data seperti pengambilan dan penyimpanan ke database.
Template halaman home Job
File index.html.twig akan menggenerate kode tabel html untuk menampilkan semua berita lowongan. Berikut ini adalah kode lengkapnya:src/Ibw/JobeetBundle/Resources/views/Job/index.html.twig
{% extends 'IbwJobeetBundle::layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/ibwjobeet/css/jobs.css') }}" type="text/css" media="all" />
{% endblock %}
{% block content %}
<h1>Job list</h1>
<table class="records_list">
<thead>
<tr>
<th>Id</th>
<th>Type</th>
<th>Company</th>
<th>Logo</th>
<th>Url</th>
<th>Position</th>
<th>Location</th>
<th>Description</th>
<th>How_to_apply</th>
<th>Token</th>
<th>Is_public</th>
<th>Is_activated</th>
<th>Email</th>
<th>Expires_at</th>
<th>Created_at</th>
<th>Updated_at</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr>
<td><a href="{{ path('ibw_job_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
<td>{{ entity.type }}</td>
<td>{{ entity.company }}</td>
<td>{{ entity.logo }}</td>
<td>{{ entity.url }}</td>
<td>{{ entity.position }}</td>
<td>{{ entity.location }}</td>
<td>{{ entity.description }}</td>
<td>{{ entity.howtoapply }}</td>
<td>{{ entity.token }}</td>
<td>{{ entity.ispublic }}</td>
<td>{{ entity.isactivated }}</td>
<td>{{ entity.email }}</td>
<td>{% if entity.expiresat %}{{ entity.expiresat|date('Y-m-d H:i:s') }}{% endif%}</td>
<td>{% if entity.createdat %}{{ entity.createdat|date('Y-m-d H:i:s') }}{% endif%}</td>
<td>{% if entity.updatedat %}{{ entity.updatedat|date('Y-m-d H:i:s') }}{% endif%}</td>
<td>
<ul>
<li>
<a href="{{ path('ibw_job_show', { 'id': entity.id }) }}">show</a>
</li>
<li>
<a href="{{ path('ibw_job_edit', { 'id': entity.id }) }}">edit </a>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<ul>
<li>
<a href="{{ path('ibw_job_new') }}">
Create a new entry
</a>
</li>
</ul>
{% endblock %}
mari kita sedikit bersihkan kodenya replace twig block content dengan kode berikut:
src/Ibw/JobeetBundle/Resources/views/Job/index.html.twig
{% block content %}
<div id="jobs">
<table class="jobs">
{% for entity in entities %}
<tr class="{{ cycle(['even', 'odd'], loop.index) }}">
<td class="location">{{ entity.location }}</td>
<td class="position">
<a href="{{ path('ibw_job_show', { 'id': entity.id }) }}">
{{ entity.position }}
</a>
</td>
<td class="company">{{ entity.company }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endblock %}
Template halaman detail lowongan
Sekarang mari kita sesuaikan template halaman detailnya. Buka file show.html.twig kemudian replace kodenya dengan kode berikut ini:src/Ibw/JobeetBundle/Resources/views/Job/show.html.twig
{% extends 'IbwJobeetBundle::layout.html.twig' %}
{% block title %}
{{ entity.company }} is looking for a {{ entity.position }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/ibwjobeet/css/job.css') }}" type="text/css" media="all" />
{% endblock %}
{% block content %}
<div id="job">
<h1>{{ entity.company }}</h1>
<h2>{{ entity.location }}</h2>
<h3>
{{ entity.position }}
<small> - {{ entity.type }}</small>
</h3>
{% if entity.logo %}
<div class="logo">
<a href="{{ entity.url }}">
<img src="/uploads/jobs/{{ entity.logo }}"
alt="{{ entity.company }} logo" />
</a>
</div>
{% endif %}
<div class="description">
{{ entity.description|nl2br }}
</div>
<h4>How to apply?</h4>
<p class="how_to_apply">{{ entity.howtoapply }}</p>
<div class="meta">
<small>posted on {{ entity.createdat|date('m/d/Y') }}</small>
</div>
<div style="padding: 20px 0">
<a href="{{ path('ibw_job_edit', { 'id': entity.id }) }}">
Edit
</a>
</div>
</div>
{% endblock %}
Aksi halaman Job
Halaman detail lowongan berasal dari show action. Yang didefinisikan oleh method showAction() di dalam JobController.src/Ibw/JobeetBundle/Controller/JobController.php
public function showAction($id)
{
$em = $this->getDoctrine()->getManager();
$entity = $em->getRepository('IbwJobeetBundle:Job')->find($id);
if (!$entity) {
throw $this->createNotFoundException('Unable to find Job entity.');
}
$deleteForm = $this->createDeleteForm($id);
return $this->render('IbwJobeetBundle:Job:show.html.twig', array(
'entity' => $entity,
'delete_form' => $deleteForm->createView(),
));
}
Sebagaimana di method index kali ini kita juga menggunakan doctrine object yaitu find() method, dengan parameter masukan yaitu $id. Object tersebut akan mengambil data dari database berdasarkan $id tersebut. Jika $id yang diberikan tidak ditemukan di dalam database maka kita akan menampilka error page 404 not found.
Ok sekian dulu untuk hari ini, have a nice day Yaaaa!
No comments:
Post a Comment