Hallo Semuanya, apa kabar? semoga dalam keadaan yang baik. Setelah pembahasan sebelumnya mengenai cara install Symfony, pembahasan kali ini mengenai cara membuat halaman web dengan Symfony (ver.4.3.3) menggunakan template dari bootstrap. Bagi kalian yang sering membuat web pasti sudah tau apa itu bootstrap, ya! bootstrap merupakan library css yang digunakan untuk membuat website dengan tampilan yang menarik dan responsive.
Pembahasan kali ini saya menggunakan Linux Ubuntu, namun jika kalian menggunakan Windows perintahnya tidak jauh berbeda sehingga kalian juga dapat mengikuti tutorial dari postingan ini meskipun menggunakan OS Windows. Oke langsung saja.
1. Pertama buka terminal (pada ubuntu) atau CMD (pada Windows) masuk ke folder project yang telah kalian buat dan ketikan perintah berikut :
Perintah tersebut berfungsi untuk menjalankan project kita dengan menggunakan server dari symfony.
(tampilan page default saat pertama kali menjalan symfony)
2. Selanjutnya kita membuat Controller untuk mengakses halaman yang akan kita buat sendiri dengan perintahPerintah php bin/console make:controller seperti pada gambar berikut.
Pada gambar di atas saya membuat controller dengan nama HomeController, setelah membuat controller dengan perintah seperti pada gambar, maka file template home yang berisi index.html.twig akan otomatis dibuat. File index.html dalam folder "templates/home/index.html.twig" ini merupakan file yang akan menampilkan halaman dari page home ketika akan diakses.
Pada browser kalian ketikan url http://127.0.0.1:8000 /home,untuk test apakah file controller yang kita buat berhasil. Jika berhasil maka akan muncul halaman web seperti pada gambar di bawah ini :
3. Kita sudah membuat halaman home, selanjutnya kita akan membuat menu dan layout web menggunakan template dari bootstrap. Kalian bisa menggunakn template dari bootswatch (https://bootswatch.com/). Buka project kalian menggunakan aplikasi code editor favorite kalian, pada tutorial ini saya menggunkan code editor "sublime text", berikut tampilan folder project yang saya buat dalam aplikasi sublime :
4. Untuk mengunakan theme dari bootstrap, pada halaman website Bootwatch pilih thema yang diinginkan, kemudian pada button download klik pada menu boots strap.min.css :
lalu kalian akan masuk ke file library css thema tersebut dan copy url linknya :
5. Selanjutnya kita integrate template bootstrap, di tutorial ini karena pemanggilan file css dari Bootswatch
dan java script dipanggil dengan menggunakan link, jadi agar
template dari Bootwatch dan java script bisa di baca/jalan kalian harus
terkoneksi dengan internet. Caranya buka file base.html.twig yang terdapat dalam folder "templates/base.html.twig"
file base.html.twig berfungi sebagai wadah untuk menempatkan file css dan javascript. Paste link yang di copy tadi pada baris code file base.html.twig seperti pada gambar di bawah ini :
Tambahkan juga link untuk memanggil file java script :
6. Selanjutnya buat folder dengan nama inc dalam folder "templates" dan buat file "navabar.html.twig" dalam folder tersebut :
<nav class="navbar navbar-expand-sm navbar-dark bg-primary mb-3">
<div class="container">
<a href="" class="navbar-brand">Symfony1</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#mobile-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mobile-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link" >Home</a></li>
<li class="nav-item">
</ul>
</div>
</nav>
kalian bisa melihat kode lengkap untuk membuat menu navbar pada thema yang kalian pilih di bootswatch.
7. Buka kembali file base.html.twig dan pada bari kode <body> </body> kita include file navbar.html.twig yang kita sudah buat seperti pada gambar :
8. Setelah itu kita masuk ke file index.html.twig pada folder home yang berada pada folder "templates/home/index.html.twig" lalu copy perintah di bawah ini dan save :
{% extends 'base.html.twig' %}
{% block body %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Home</h1>
<p> Hello this is home page </p>
</div>
{% endblock %}
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Home</h1>
<p> Hello this is home page </p>
</div>
{% endblock %}
9. Jika sempua langkah-langkah di atas sudah dikerjakan pada browser ketikan url: http://127.0.0.1:8000/home maka tampilan web akan seperti pada gambar di bawah ini :
Oke, itu tadi tutorial cara membuat halaman web Symfony dengan menggunakan Thema dari Bootswatch. Sampai ketemu lagi di postingan selanjutnya ^^
referensi :
https://bootswatch.com/
https://symfony.com/
No comments:
Post a Comment