[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-requirejs-pjax-membuat-aplikasi-web-yang-lebih-effecient-dan-super-fast":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":14,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},317,"requirejs-pjax-membuat-aplikasi-web-yang-lebih-effecient-dan-super-fast","Requirejs + pjax : Part 1 Membuat website yang lebih efisien dan lebih cepat","bcscoder 01 Oct 2014 at 11:11 pm Web Development requirejs pjax Ada banyak cara untuk membuat website yang lebih efisien dan memiliki loading yang lebih cepat. Salah satu cara untuk membuat kecepatan ",null,[],"2016-03-03T16:00:00Z","2026-07-14T04:39:29.988206Z","bcscoder\n\u003Cbr\u002F>\n01 Oct 2014 at 11:11 pm\n\t\t\t\t\t\t\nWeb Development\n\u003Cbr\u002F>\nrequirejs\npjax\n\u003Chr\u002F>\n\u003Cp>Ada banyak cara untuk membuat website yang lebih efisien dan memiliki loading yang lebih cepat. Salah satu cara untuk membuat kecepatan website menjadi lebih cepat adalah dengan mengurangi request (http request) yang tidak perlu pada halaman website kita seperti asset dan gambar. Kali ini kita mau membahas tentang bagaimana cara memanage asset seperti css dan js yang lebih efesien. Tutorial kali ini akan membahas tentang html5 pushstate dan AMD (\u003Cem>Asynchronous Module Definition\u003C\u002Fem>).\u003C\u002Fp>\u003Cp>Lalu apa saja yang kita perlukan dalam tutorial kali ini? Pertama kita akan mencoba menggabungkan salah satu AMD yaitu \u003Ca href=\"%5C%22http:\u002F\u002Frequirejs.org%5C%22\">Require.Js\u003C\u002Fa>, sebuah javascript file yang berfungsi sebagai module loader dengan \u003Ca href=\"%5C%22https:\u002F\u002Fgithub.com\u002Fdefunkt\u002Fjquery-pjax%5C%22\">Jquery PJax\u003C\u002Fa>, sebuah jQuery plugin yang menggunakan ajax and pushState untuk menghasilkan sebuah pengalaman browsing yang cepat. \u003C\u002Fp>\u003Cp>Tapi ada baiknya kita list dahulu library atau plugin yang akan kita gunakan\u002Fkamu pelajari di projek ini:\u003C\u002Fp>\u003Col>\u003Cli>Require.Js, untuk yang belum tahu apa itu requirejs, bisa cek introductionnya disini (Kenalan dengan RequireJs)\u003C\u002Fli>\u003Cli>Jquery Pjax\u003C\u002Fli>\u003Cli>Bower : \u003Ca href=\"%5C%22http:\u002F\u002Fbower.io%5C%22\">bower.io\u003C\u002Fa> sebuah website package management, \u003C\u002Fli>\u003C\u002Fol>\u003Ch4>Persiapan\u003C\u002Fh4>\u003Cp>Apa saja yang kita butuhkan untuk memulai tutorial kali ini? \u003C\u002Fp>\u003Col>\u003Cli>Pengalaman dengan programming PHP (dikit aja cukup)\u003C\u002Fli>\u003Cli>Sedikit pengetahuan tentang htaccess (dikit aja cukup)\u003C\u002Fli>\u003Cli>HTML + CSS + Javascript (wajib)\u003C\u002Fli>\u003Cli>Command Line (dikit aja cukup)\u003C\u002Fli>\u003Cli>Text Editor kesayangan kalian\u003C\u002Fli>\u003Cli>XAMPP\u002FMAMP\u002FLAMP atau local server untuk menjalankan website yang kita buat\u003C\u002Fli>\u003C\u002Fol>\u003Ch4>Tahap 1 : Install Bower & Create bower.json\u003C\u002Fh4>\u003Cp>Kalau kalian belum tahu atau belum menginstall bower sebelumnya, silakan check posting tentang install bower disini. Kalau sudah buka terminal kesayangan kalian dan buat sebuah directory baru di local server komputer kamu dan masuk ke dalam directory tersebut. Silakan cek contoh di bawah ini bagaimana kita mensetup directory project kita untuk pertama kali.\u003C\u002Fp>\n\u003Cpre>\u002F\u002Fcontoh jika kalian menggunakan OSX dan MAMP\n$ cd \u002FApplication\u002FMAMP\u002Fhtdocs \u002F\u002Fhtdocs directory\nmkdir your_direcory_name \ncd your_directory_name\n\u002F\u002Fcontoh jika kalian menggunakan windows dan XAMPP\ncd c:\u002Fxampp\u002Fhtdoc\nmkdir your_direcory_name\ncd your_directory_name\u003C\u002Fpre>\u003Cp>Nah pastikan kalian sudah berada di dalam directory project kamu, selanjutnya kita akan membuat sebuah file bower.json yang nanti kita gunakan untuk memanage dependency aplikasi kita. Kalian bisa membuat file bower.json secara manual menyimpan code di bawah ini dengan nama \u003Ccode>bower.json\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cpre>{\n  \"name\": \"require_pjax\",\n  \"version\": \"0.0.0\",\n  \"authors\": [\n    \"bcscoder <bcscoder@gmail.com>\"\n  ],\n  \"description\": \"example requirejs + pjax\",\n  \"license\": \"MIT\",\n  \"private\": true,\n  \"ignore\": [\n    \"**\u002F.*\",\n    \"node_modules\",\n    \"bower_components\",\n    \"app\u002Fbower_components\",\n    \"test\",\n    \"tests\"\n  ]\n}\n\u003C\u002Fpre>\u003Cp>Atau kalian tinggal ketik \u003Ccode>bower init\u003C\u002Fcode>  lewat terminal dan tinggal mengikuti step-stepnya, maka kamu bisa juga membuat file bower.json secara otomatis.\u003C\u002Fp>\u003Ch4>Step 2 : Install dependency\u003C\u002Fh4>\u003Cp>Kita akan membutuhkan beberapa dependency\u002Flibrary untuk tutorial kali ini, yaitu:\u003C\u002Fp>\u003Col>\u003Cli>RequireJs\u003C\u002Fli>\u003Cli>JqueryPjax\u003C\u002Fli>\u003Cli>Bootsrap (untuk styling)\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Untuk menginstall package-package tersebut, kita tentu tidak mendownloadnya secara manual dong, kita serahkan kepada bower saja. Caranya buka file bower.json yang tadi kita buat dan tambahkan script di bawah ini :\u003C\u002Fp>\n\u003Cpre>\"dependencies\": {\n    \"requirejs\": \"~2.1.15\",\n    \"jquery\": \"~2.1.1\",\n    \"jquery-pjax\": \"~1.9.2\",\n    \"bootstrap\": \"~3.2.0\"\n}<br>\u003C\u002Fpre>\u003Cp>Kalau kamu sudah mengedit file bower.jsonnya, sekarang buka terminalnya lagi dan ketik \u003Ccode>bower install\u003C\u002Fcode> Bower akan mendownload dependecynya buat kamu dan tinggal tunggu sebentar.\u003C\u002Fp>\u003Cp>Atau kalau kalian males ngedit file bowernya, kalian juga bisa menginstall dependecynya lewat terminal satu persatu, tinggal ketik masing-masing code di bawah ini dan file bower.json kamu akan terupdate otomatis dan dependecynya akan otomatis terdownload.\u003C\u002Fp>\n\u003Cpre>$ bower install requirejs --save\n$ bower install jquery --save\n$ bower install jquery-pjax --save\n$ bower install bootsrap --save\u003C\u002Fpre>\u003Cp>Nah kalau sudah selesai, coba perhatikan di dalam directory yang kita buat tadi. Jika semua proses sudah benar, maka kamu akan mendapati sebuah folder baru dengan nama app di dalam directory project kamu. SusunanDirectory akan menjadi seperti ini:\u003C\u002Fp>\n\u003Cpre>your_dir\u002F\n    - bower.json\n    - app\u002F\n      |_ bower_components\n          |_ bootstrap\n          |_ jquery\n          |_ jquery-pjax \n          |_ requirejs \u003C\u002Fpre>\u003Ch4>Step 3. Buat Homepage\u003C\u002Fh4>\u003Cp>Sebelumnya, kita akan buat 2 buah folder baru di dalam folder app yaitu \u003Ccode>styles\u003C\u002Fcode> dan \u003Ccode>scripts\u003C\u002Fcode>  untuk tempat style dan script tambahan yang akan kita gunakan nanti.\u003C\u002Fp>\u003Cp>Buat sebuah file dengan nama \u003Ccode>style.js\u003C\u002Fcode> di dalam folder styles yang berfungsi untuk tambahan atau modifikasi css untuk project kita\u003C\u002Fp>\u003Cp>Sekarang saatnya kita membuat halaman homepage untuk project kali ini. Buat sebuah file dengan nama \u003Ccode>index.html\u003C\u002Fcode> dan simpan di main directory ya.\u003C\u002Fp>\n\u003Cpre><!DOCTYPE html>\n<html>\n<head>\n\t<title>RequireJs + Pjax<\u002Ftitle>\n\t<link rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"app\u002Fbower_components\u002Fbootstrap\u002Fdist\u002Fcss\u002Fbootstrap.min.css\">\n\t<link rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"app\u002Fstyles\u002Fstyle.css\">\n<\u002Fhead>\n<body>\n<div class=\"container\">\n      <div class=\"header\">\n        <ul class=\"nav nav-pills pull-right\" role=\"tablist\">\n          <li role=\"presentation\" class=\"active\"><a href=\"#\">Home<\u002Fa><\u002Fli>\n          <li role=\"presentation\"><a href=\"#\">About<\u002Fa><\u002Fli>\n          <li role=\"presentation\"><a href=\"#\">Contact<\u002Fa><\u002Fli>\n        <\u002Ful>\n        <h3 class=\"text-muted\">RequireJs + PJax<\u002Fh3>\n      <\u002Fdiv>\n      <div class=\"jumbotron\">\n        <h1>My Homepage<\u002Fh1>\n        <p class=\"lead\">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<\u002Fp>\n        <p><a class=\"btn btn-lg btn-success\" href=\"#\" role=\"button\">Hello World!<\u002Fa><\u002Fp>\n      <\u002Fdiv>\n      <div class=\"footer\">\n        <p>© @bcscoder 2014<\u002Fp>\n      <\u002Fdiv>\n    <\u002Fdiv> <!-- \u002Fcontainer -->\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fpre>\u003Cp>Dan untuk file style.css, kamu bisa gunakan kode style di bawah ini.\u003C\u002Fp>\n\u003Cpre>\u002F* Space out content a bit *\u002F\nbody {\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n\u002F* Everything but the jumbotron gets side spacing for mobile first views *\u002F\n.header,\n.marketing,\n.footer {\n  padding-right: 15px;\n  padding-left: 15px;\n}\n\u002F* Custom page header *\u002F\n.header {\n  border-bottom: 1px solid #e5e5e5;\n}\n\u002F* Make the masthead heading the same height as the navigation *\u002F\n.header h3 {\n  padding-bottom: 19px;\n  margin-top: 0;\n  margin-bottom: 0;\n  line-height: 40px;\n}\n\u002F* Custom page footer *\u002F\n.footer {\n  padding-top: 19px;\n  color: #777;\n  border-top: 1px solid #e5e5e5;\n}\n\u002F* Customize container *\u002F\n@media (min-width: 768px) {\n  .container {\n    max-width: 730px;\n  }\n}\n.container-narrow > hr {\n  margin: 30px 0;\n}\n\u002F* Main marketing message and sign up button *\u002F\n.jumbotron {\n  text-align: center;\n  border-bottom: 1px solid #e5e5e5;\n}\n.jumbotron .btn {\n  padding: 14px 24px;\n  font-size: 21px;\n}\n\u002F* Supporting marketing content *\u002F\n.marketing {\n  margin: 40px 0;\n}\n.marketing p + h4 {\n  margin-top: 28px;\n}\n\u002F* Responsive: Portrait tablets and up *\u002F\n@media screen and (min-width: 768px) {\n  \u002F* Remove the padding we set earlier *\u002F\n  .header,\n  .marketing,\n  .footer {\n    padding-right: 0;\n    padding-left: 0;\n  }\n  \u002F* Space out the masthead *\u002F\n  .header {\n    margin-bottom: 30px;\n  }\n  \u002F* Remove the bottom border on the jumbotron for visual effect *\u002F\n  .jumbotron {\n    border-bottom: 0;\n  }\n}\u003C\u002Fpre>\u003Cp>Jika sudah kalian simpan semua file-file tersebut, sekarang saatnya kita coba lihat bagaimana tampilannya di browser kamu, coba ketik \u003Ccode>http:\u002F\u002Flocalhost\u002Frequire_pjax\u003C\u002Fcode> . Kalau semua berhasil, kalian akan melihat tampilan seperti gambar di bawah ini.\u003C\u002Fp>\u003Cp>Bagaimana? Tertarik dengan part selanjutnya? Pada part 2 kita akan membuat 2 buah halaman lagi yaitu About dan Contact. Punya Masukan, silakan tinggalkan comment di bawah ya :)\u003C\u002Fp>\n\u003Chr\u002F>\n\t\t\t\t\tShare via:\n\t\t\t\t\t\n\u003Ch4>About Author\u003C\u002Fh4>\n@\u003Cem>bcscoder\u003C\u002Fem>\n\u003Cp>hello! saya seorang pecinta dunia programming, gamer dan freelancer web developer. Follow me @bcscoder\u003C\u002Fp>","bcscoder 01 Oct 2014 at 11:11 pm Web Development requirejs pjax Ada banyak cara untuk membuat website yang lebih efisien dan memiliki loading yang lebih cepat. ",[],[],0]