About Me

logo
Acid Opal (Naufal Rasyid) adalah seseorang memiliki passion di dunia IT. Programming , desain, networking dan semua hal yang berhubungan dengan IT dia sukai dan dia pelajari. Melalui blog ini, mas opal akan berbagi kepada kalian mengenai [...]

Konfigurasi Phalcon Dengan Bootstrap

Muslim Programmer / Programming  / Phalcon  / Konfigurasi Phalcon Dengan Bootstrap

Konfigurasi Phalcon Dengan Bootstrap

Konfigurasi Phalcon Dengan Bootstrap. Setelah kita paham tentang konsep dasar MVC, sekarang mari kita praktekan konsep dasar tersebut. Hal yang mendasar dalam sebuah website yaitu tampilan, inilah yang membuat website seakan-akan hidup dan bisa berinteraksi dengan pengguna. Sebelum kita membahas CRUD terlebih dahulu saya ingin membahas bagaimana cara melakukan konfigurasi phalcon dengan bootstrap.

Apa itu bootstrap? Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web.


Pastikan sobat mengikuti tutorial sebelumnya, karena tutorial ini bersifat series yang artinya berlanjut dari satu tutorial ketutorial yang lain jadi saya harap sebelum sobat mengikuti cara dibawah ini Konfigurasi Phalcon Dengan Boostrap, dipersilahkan untuk membaca artikel sebelumnya mengenai Konsep Dasar MVC Pada Phalcon.



Cara Konfigurasi Phalcon Dengan Ubuntu


1. Download bootstrap 3.3.7 diofficial bootstrapnya : http://getbootstrap.com/getting-started/#download

Download Bootstrap

Download bagian Sourcecode-nya dipilihan tengah bisa dilihat contoh gambar diatas.


2.Setelah didwonload,extrak file bootstrap 3.3.7 kemudian buka folder : bootstrap-3.3.7/docs/examples/. Akan ada banyak theme bootstrap yang tersedia, silahkan sobat pilih tema mana yang akan digunakan. Theme Bootstrap

3. Setelah diekstrak mari kita buat project website phalcon kita menggunakan phalcon-devtools. Buka terminal sobat lalu ketikan cd /var/www/html/ lalu ketikan phalcon create-project crud_phalcon

Terminal Phalcon-Devtools


Maka akan otomatis terbuat folder crud_phalcon di /var/www/html/crud_phalcon nah silahkan sobat menjelajah disetiap foldernya.
Crud Phalcon
APP PhalconPublic Phalcon
4. Pindahkan folder CSS, JS, Font hasil ekstrakan bootstrap menuju direktori folder phalcon yang telah kita install di folder : bootstrap-3.3.7/dist/ menuju folder /var/www/html/crud_phalcon.

Untuk dapat mengcopynya jangan lupa untuk merubah hak aksesnya menjadi 777 cara rubahnya ketikan diterminal sudo chmod -R 777 /var/www/html setelah itu ketikan kembali sudo chmod -R 777 /var/www/html/crud_phalcon

bootstrap to phalcon
5. Namun, pada tutorial ini saya akan menggunakan theme bootstrap Cover sobat bisa buka index.html dari theme Cover bootstrap di folder : bootstrap-3.3.7/docs/examples/cover

Theme Bootstrap Cover
Pindahkan cover.css menuju /var/www/html/crud_phalcon/public/css


4. Kita test dulu phalcon kita apa sudah berjalan dengan baik atau belum , silahkan buka browser dan ketik dilama browser sobat localhost/crud_phalcon Sukses Install Phalcon

Jika sobat menemukan eror seperti gambar dibawah ini itu tandanya soba belum memberikan hak akses untuk membacanya. Caranya ubah dulu permission website sobat dengan mengetikkan diterminal sudo chmod -R 777 crud_phalcon
eror
5. Setelah konfigurasi Phalcon sudah selesai dan mengcopy file css bootstrap ke phalcon sudah selesai saatnya kita ngoding!! Yeayy 😀 Buka script services.php di folder crud_phalcon/app/config/services.php. CTRL + F pada sublime carikan kata ‘compiledSeparator’ => ‘_’ lalu tambahkan koma diakhirnya dan tambahkan line ‘compileAlways’ => true sehingga menjadi seperti kode dibawah ini :

6. Selanjutnya adalah kita akan mengganti tampilan utamanya dengan menggunakan bootstrap theme Cover,
silahkan sobat buka file index.volt yang berada difolder /crud_phalcon/app/views/index.html 😀
index
Hapus semua kode tersebut 😀 Lalu gantikan dengan kode index.volt dibawah ini :

{{ stylesheet_link(“css/bootstrap.min.css”) }} -> adalah fungsi dari .volt phalcon untuk memudahkan dalam pengetikan link css yang kita taruh difolder public/css.

{{ javascript_include(‘js/bootstrap.min.js’) }} -> adalah fungsi dari .volt phalcon untuk memudahkan dalam pengetikan link javasacrip yang kita taruh difolder public/js

7. Ada dua file index.volt , yang pertama difolder views(crud_phalcon/app/views/index.volt) dan yang kedua berada difolder index(crud_phalcon/app/views/index/index.volt). Yang pertama adalah page yang akan selalu diload oleh halaman yang lain dan yang kedua adalah page halaman utama 😀



Dan kita lihat dibrowser kita , ini dia hasilnya yeaay!! 😀

flying phalcon

Selamat! Kini Phalcon v.3.0.0 telah menyatu dengan Bootstrap sobat silahkan untuk terbang bersama phalcon 😀

Naufal Rasyid

im.acidopal@gmail.com

Sharing Learning And Make A something!

  • Fatoni

    phalcon create-project crud_phalcon
    hasilnya Error: could not open input file: E:phalcon-devtoolsphalcon.php create-project crud_phalcon
    kira-kira salahnya dimana gan?

    • Acid Opal

      masbro pakai windows yaa ? kalau seperti itu tandanya phalcon-devtoolsnya belum berjalan dengan baik mas 😀
      Monggo di ikutin cara disini mas : http://acidopal.com/cara-install-phalcon-devtools-di-windows/
      apakah sudah edit path di phalcon.batnya ?
      apakah sudah setting environtment variable ?

      Monggo diikuti step-by-stepnya mas 😀

      • Mamet

        klo .volt itu File apa ya..??

        • Acid Opal

          .volt itu template engine buatannya phalcon mas

      • Fatoni

        iya gan, akhirnya ane berhasil hehe..

  • Ahmad Fauzi Rahman

    kalau install phalcon di ubuntu ada nggak mas tutorialnya?

  • handoyo

    Mas, ada tutorial bikin admin panel di phalcon ga? Makasih.