Senin, 24 April 2017

Tutorial Sublime Text 3 – #15 Coding Modes

Assalamualaikum Wr. Wb

Selamat malam sahabat Lupa code semuanya, berjumpa lagi bersama saya selaku admin dari blog lupacode – tutorial pemrograman Bagaimana kabar kalian hari ini ? Semoga kita selalu dalam keadaan sehat walapiat serta tetap dalam lindungan Allah swt. Pada pembahasan kemarin kita telah membahas mengenai seri sublime text yaitu pada materi Tutorial Sublime Text 3 - #14 Sidebar Enhancements & Alignment bagi temen – temen yang ketinggalan materi tutorial kemarin sahabat lupa code semua dapat mengunjungi halaman Daftar Isi pada blog ini untuk melihat seluruh daftar materi yang sudah kita bahas pada pembahasan sebelumnya.

Tutorial Sublime Text 3 – #15 Coding Modes

Pada pembahasan materi kali ini kita akan membahas sesuatu yang berbeda, kita akan membahas mengenai bagaimana konfigurasi lingkungan sublime text agar sesuai dengan lingkungan kita pada saat ngoding. Saya menyebutnya ada dua mode pada saat kita melakukan ngoding yang pertama ada

# Multiple layout
Jadi kita bisa membuat beberapa layout pada tampilan sublime text kita 

#Distraction-free mode
Yang ini kita bisa sebut mode bebas gangguan

Untuk lebih jelasnya nanti kita bisa lihat contohnya, yang pertama kita bahas dulu mengenai Multiple layout

Contohnya misalkan saya mempunyai tiga buah file, ada html, css dan javascript. Biasanya kalau kalian sebagai web desainer atau web developer pasti kalian sering banget bekerja dengan ketiga file tersebut. ketiga buah file ini saling terkait dimana biasanya kalau kalian mengedit salah satu file ini maka akan berdampak pada file yang lainnya. Kemudian biasanya kalian akan berpindah – pindah untuk mengedit tiap-tiap file tersebut.  

Sebelum kita masuk kedalam mode yang pertama #Multiple layout saya akan memberitahu dulu kepada kalian bahwa ada shortcut yang akan dengan mudah untuk kita agar dapat berpindah – pindah dari satu file ke dalam file yang liannya dengan sangat cepat. Shrotcut untuk berpindah – pindah dari file yang satu kedalam file yang liannya adalah CTRL + TAB kita hanya perlu menekan shortcut CTRL + TAB untuk dapat berpindah – pindah dari satu file kedalam file yang lainnya.

Sekarang mode yang pertama ini akan memungkin kan untuk kalian agar dapat melihat ke tiga file tersebut dengan sekaligus atau secara bersamaan dengan membuat tampilannya menjadi beberapa kolom atau baris.

Yang perlu kita lakukan adalah kita masuk kedalam menu View -> Layout -> Nah disitu kalian dapat pilih, dan defaultnya adalah single. Kemudian kalian dapat pilih menjadi 2 colom

multiple layout - Lupacode

Maka nanti akan secara otomatis akan terpisah seperti gambar diatas. Dan untuk memindahkan file tersebut kedalam kolom yang sebelah kanannya kalian hanya perlu drag saja tab nya dari file yang akan kalian pindahkan ke sebelah kanan. Jadi kita dapat denga mudah untuk melakukan pengerjaan secara langsung tanpa harus berpindah file.

Atau kalian ingin membuatnya menjadi tiga kolom, kalian hanya tinggal klik view -> layout -> colomuns: 3  maka secara otomatis akan dibuatkan tiga kolom seperti ini

multiple layout 3 Colomuns- Lupacode

Apalagi jika kalian punya monitor white screen yah, ini akan sangat membantu karna kalian dapt melihat ke-tiga file nya sekaligus. Jadi kalau kalian nyaman dengan seperti ini kalian bisa gunakan multiple layout.

Tidak saja hanya kolom yang dapat dipisahkan, jika kalian ingin memisahkan nya menjadi baris itu juga bisa dilakukan. Kalian hanya perlu masuk kedalam menu view -> layout -> kemudian pilih saja rows, maka akan dibuatkan terpisah menjadi baris seperti gambar dibawah ini

multiple layout Rows 2- Lupacode

Atau kita juga bisa membuat menjadi seperti ini misalnya, saya ingin membuat yang sebelah kiri menjadin kolom, kemudian yang sebelah kanannya baris, contoh saaya ingin yang sebelah kiri itu file html, dan sebelah kanan yang atas itu css dan yang bawahnya adalah javascript, caranya adalah seperti ini

Kalian ubah dulu menjadi dua kolom, lalu pindahkan saja file css dan javascript nya ke sebelah kanan dan sekarang kita ingin membagi kolom yang sebelah kanan nya menjadi dua baris, caranya adalah kita masuk kedalam menu View -> Groups -> Max Colomuns: 2 da ini artinya tidak akan lebih dari dua kolom. Setelah itu kita masuk lagi ke dalam menu Vew -> Groups -> New Groups Maka nanti dia akan dua kolom seperti gambar dibawah ini

multiple layout Rows & Colomuns - Lupacode

Jadi sekarang kalian bisa lihat disebelah kiri ada html karna biasanya html ingin terlihat lebih banyak, dan disebelah kanan atas ada css kemudian dikanan bawah ada javascript seperti itu yah, jadi kalau kalian nyaman dengan ini silahkan digunakan. Memang mungkin pada awalnya pusing juga ada banyak tampilan dalam satu layar tapi kalau kalian ingin melihat semuanya sekaligus mungkin cara ini bisa membantu.

Kemudian supaya bisa lebih cepat lagi kalian gak perlu memakai mouse, karna sublime text telah menyediakan shortcut nya untuk melakukan semua ini. Kalian bisa lihat pada menu view -> layout kalu kalian ingin membuat menjadia colomuns single kalian cukup tekan shortcut nya ALT + SHIFT + 1 maka akan kembali lagi seperti defaultnya yaitu satu kolom. Ya jadi silahkan sesuaikan dengan keinginan masing – masing

Ada lagi shortcut untuk dapat memindahkan file kedalam kolom dengan cepat, jadi kalian tidak harus menggunakan mouse lalu mendrag file tersebut untuk dipindahkan ke dalam kolom yang lain. Caranya adalah pertama kalian pindahkan dulu fokos atau kursornya kedalam file yang ingin kalian pindahkan. Contohnya kolomnya ada tiga, jika kalian ingin pindahkan file tersebut ke dalam kolom dua makan kita hanya perlu menekan CTRL + SHIFT + 2 maka file tersebut akan langsung berpindah ke dalam kolom yang ke – dua, atau jika kita ingin pindahkan file yang lainnya kedalam kolom tiga makan yang pertama kita simpan dulu kursornya kedalam file yang ingin kita pindahkan kemudian kita tekan CTRL + SHIFT + 3 maka secara otomatis file akan langsung berpindah kedalam kolom 3. Jadi silahkan bermain – main dengan shortcut nya juga, agar dapat meminimalisir penggunaan mouse dan trackpad

Mode yang ke-dua itu disebutnya distraction-free mode atau mode bebas gangguan ini adalah kebalikan dari multiple layout. Kalau tadi multiple layout fungsinya adalah untuk melihat banyak file sekaligus, kalau ini digunakan hanya fokus untuk ke satu file saja. kalian bisa akses mode nya dengan masuk ke dalam menu View -> Enter Distraction Free Mode maka tampilannya akan menjadi seperti dibawah ini

Distraction free mode - Lupacode

Kalian dapat lihat tampilan diatas dalam mode distraction mode maka sidebar nya hilang kemudian Start menu nya juga hilang, hal – hal yang tidak kita perlukan itu dihilangkan oleh si sublime text. Secara default menu nya masih ada tapi biasanya kalau saya menggunakan mode distraction mode menu nya saya hilangkan juga, jadi kalian masuk ke view -> hide menu maka sekarang yang kelihatan hanya menu nya saja yang sedang aktif.

Biasanya kalau saya menggunakan distraction free mode saya gabunggkan dengan teknik searcing yang telah kita pelajari pada materi tutorial yang sebelumnya Go To Anything dengan menggunakan shortcut nya CTRL + P untuk kita agar dapat berpindah ke dalam file lain. Jadi pastikan kalau kalian menggunakan Distraction Free Mode kalian harus betul – betul tau dulu struktur file nya ada apa saja dan fungsinya ada apa saja dan kodenya seperti apa. Jadi kalau saya mau pindah kedalam file index maka saya perlu ketikan CTRL + P dan saya tuliskan index maka akan langsung berpindah pada file index dengan sangat cepat.

Jadi silahkan dipilih ke dua mode tadi sehingga ngoding kalian menjadi lebih cepet lagi. Oke jadi itu yang ingin saya jelaskan pad materi pembahasan kali ini, mudah – mudahan bisa membantu yah. Kalau misalkan ada yang bingung silahkan ditanyakan saja

Baiklah untuk pembahasan materi tutorial yang pertama ini saya cukupkan sampai disini dulu dan selanjutnya kita masih akan membahas mengenai seri sublime text ini, jadi tetap kunjungi terus blog lupacode ini agar kalian mendapatkan materi baru setiap harinya dan kita tetap belajar bersama – sama disini.


Saya admin dari blog lupacode undur diri sampai berjumpa didalam pembahasan materi selanjutnya yaitu pada Tutorial Sublime Text 3 – #16 Theme 

Minggu, 23 April 2017

Tutorial Sublime Text 3 – #14 Sidebar Enhancements & Alignment

Assalamualaikum Wr. Wb

Selamat pagi sahabat lupacode semuanya dimanapun kalian berada. Pad pagi hari yang cerah ini saya ingin melanjutkan pembahasan tutorial pada seri sublime text 3 yang akan membuat sahabat lupacode semuanya lebih cepat lagi dalam ngoding nya. Masih bersama saya selaku admin dari blog Lupacode – Tutorial Pemrograman yang senantiasa berbagi apa saya ketahui mengenai pemrograman, saya berbagi bukan karena saya master atau jago tapi saya disini ingin belajar bersama sama dengan sahabat lupacode semuanya dalam hal pemrograman.

Sidebar Enhancements & Alignment - Lupacode

Pada pembahasan materi sebelumnya kita telah belajar mengenai salah satu plugin yang dapat membantu agar lebih cepat coding kita yaitu mengenai Tutorial Sublime Text 3 – #13 Color silahkan bagi sahabat lupacode semua bagi yang kelewat pada materi kemarin dapat langsung megunjungi halaman Daftar Isi pada blog ini, karna dari pembahasan yang pertama sampai pembahasan yang sekarang ini sangatlah bermanfaat dan penting menurut saya untuk kita sebagai web developer.

Saya ingin dengan saya berbagi tutorial mengenai sublime text ini ide nya adalah agar kita dapat lebih cepat lagi dalam ngoding kita dengan menggunakan editor sublime text 3 ini, maka dari itu saya sangat menyarankan kepada teman – teman semua agar mengikuti pembahasan materi sublime text ini dari materi yang pertama sampai dengan materi yang terakhir agar teman – teman dapat lebih memahami lagi apa yang saya sampaikan pada pembahasan sublime text ini.

Pada kesempatan kali ini kita masih akan membahas mengenai plugin. Ada dua plugin yang akan kita bahas pada materi atau pada artikel kali ini yang digunakan untuk mempercepat kerja kita kuhusnya. Yang pertama dalam hal pembuatan file dan folder contohnya adalah seperti ini,

Saya mempunyai sebuah folder dan saya beri nama folder itu “latihan” kemudian saya masukan atau saya drag ke dalam sublime text. Ketika saya ingin membuat sebuah file, yang harus saya lakukan adalah klik kanan pada folder latihan tersebut, kemudian saya pilih New file lalu saya save dulu file tersebut dan kemudian saya beri nama index.html  nah untuk membuat sebuah file baru didalam folder latihan tersebut kita membutuhkan beberapa langkah yah, nah disini saya bisa membuat sebuah file baru didalam folder latihan tersebut dengan sangat cepat, yaitu dengan menggunakan plugin yang namanya Siderbar Enhancements kita langsung saja mencobanya agar kalian tidak bingung

Hal pertama yang saya lakukan adalah menginstal terlebih dahulu plugin tersebut, seperti biasa kita panggil terlebih dahulu Package Control kita, dengan masuk ke dalam menu Preferences -> Package Control atau seperti biasa kita gunakan shortcut nya yaitu dengan menekan CTRL + SHIFT + P lalu kita tulis dalam pencarian nya yang pertama Instal Package nya dulu, kemudian kita tekan enter lalu kita tulis nama plugin nya yaitu Sidebar Enhancements kemudian kita pilih yang paling atas seperti pada gambar dibawah ini

Sidebar Enhancements & Alignment 1 - Lupacode

Kemudian kita tunggu untuk proses penginstalannya dan ini tergantng koneksi internet yang kita pakai yah. Oke kalau sudah selesai biasakan untuk selalu merestart terlebih dahulu sublime text nya dengan cara meng close terlebih dahulu sublime text nya kemudian kita buka lagi, walaupun ada beberapa plugin yang tidak harus merestart dulu sublime text nya.

Sekarang kalian bisa lihat kalau saya klik kanan pada folder latihan yang tadi maka sekarang menu yang keluar akan menjadi banyak

Sidebar Enhancements & Alignment 2 - Lupacode

Tapi yang saya sering gunakan adalah yang New File misalnya begini, kita kan coba membuat sebuah file baru didalam folder tersebut, saya klik kanan kemudian pilih New file dan kalian bisa lihat sekarang langsung muncul kolom dibawah untuk memberi nama file teresebut

Sidebar Enhancements & Alignment 3 - Lupacode

Jadi ini sangat memudahkan, saya tinggal tulis nama file nya contoh saya tulis index.php kemudian saya tekan enter, maka akan langsung dibuatkan sebuah file index.php didalam folder latihan tersebut

Sidebar Enhancements & Alignment 4- Lupacode

Jadi kita menskip beberapa langkah yah dan pengerjaan pun akan menjadi lebih cepat nantinya. kemudian kelebihan yang lain yang dimiliki oleh plugin Siderbar Enhancements ini ialah jika saya ingin membuat sebuah folder didalam folder latihan tersebut, kemudian didalam folder nya saya ingin membuat sebuah file. Contoh nya pada folder latihan saya ingin membuat sebuah folder css dan didalam folder css itu saya ingin membuat file index.css

Kalian bisa saja dengan klik kanan kemudian New folder lalu New file tapi saya bisa membuat itu dengan hanya 1 langkah dengan menggunakan bantuan plugin Siderbar Enhancements ini, cara nya begini

Saya klik kanan kemudian saya pilih New file walaupun saya akan buat folder yah, kemudian saya tulis css/style.css jadi si sidebar enhancement ini akan mengecek folder css sudah ada belum, kalau sudah ada buat file css dan simpan didalamnya, tapi kalau folder css nya tidak ada, maka dia dibuatkan langsung

Sidebar Enhancements & Alignment 5- Lupacode

Kalian bisa lihat folder nya dibuatkan dan isinya langsung ada. Sama juga ketika saya mau bikin folder Javascript dan di dalamnya ada sebuah file lagi misalkan script.js, maka saya hanya perlu lakukan klik kanan kemudian pilih New file lalu saya tuliskan nama folder nya js kemudian saya kasih garis miring / kemudian nama file nya script.js lalu saya tekan enter maka akan langsung dibuatkan.

Sidebar Enhancements & Alignment 6- Lupacode

Jadi itu sangat memudahkan sekali khususnya buat saya ketika saya membuat file dengan cepat, jadi sangat membantu yah.

Plugin ke-dua yang akan kita bahas adalah sebuah plugin yang sangat sederhana sekali tapi cukup membantu untuk merapihkan barisan kode yang saya miliki. Contohnya begini, saya mempunyai sebuah script php seperti pada gambar dibawah ini

Sidebar Enhancements & Alignment 7- Lupacode

Jadi ceritanya saya punya variable yang di isi dengan data dari variable global post, tapi yang ingin saya rapihkan adalah tanda sama dengan diatas, kalian bisa lihat bahwa tanda sama dengan di atas tidak sejajar yah. Nah biasanya saya mensejajarkan tanda sama dengan diatas dengan cara memberikan tab tambahan agar tanda sama dengan itu sejajar, jadikan saya lakukan manual seperti itu, paham yah maksud saya.

Plugin yang akan kita gunakan sekarang yaitu untuk mempermudah hal tersebut, jadi hanya dengan satu kali klik maka semuanya akan diperbaiki atau dirapihkan code nya. Plugin nya namanya alignment kemudian seperti biasa kita instal terlebih dahulu plugin alignment tersebut.

Seperti yang biasa kita lakukan untuk menginstal sebuah plugin kita panggil dulu package control nya atau supaya cepat kita bisa menekan CTRL + SHIFT + P kemudian kita tulis install package kemudia tekan enter, lalu kita tulis nama plugin nya yaitu aligntment kita pilih yang paling atas lalu klik atau enter

Sidebar Enhancements & Alignment 8- Lupacode

Kita tunggu sampai terinstal, kalau sudah seperti biasa kita restart terlebih dahulu sublime text nya dengan cara menutup dulu sublime text nya kemudian kita buka lagi. Oke kalau sudah caranya untuk mensejajarkan code diatas atau pada sama dengan diatas itu cukup mudah. Kita hanya tinggal blok script yang ingin di sejajarkan kemudian tekan short cut nya alignment yaitu CTRL  + ALT + A dan kalian bisa lihat sekarang maka otomatis akan langsung sejajar.

Sidebar Enhancements & Alignment 9- Lupacode

Memang sangat sederhana sekali tapi ini cukup membantu agar si code nya terlihat lebih rapih. Selain untuk script PHP dia juga support untuk css, contohnya saya mempunyai sebuah script css sederhana dan saya ingin merapihkan script css nya, maka saya tinggal blok script yang ingin dirapihkan kemudian saya tekan shortcut nya yaitu CTRL + SHIFT + P Maka secara otomatis titik dua nya pun menjadi sejajar.

Sidebar Enhancements & Alignment 10- Lupacode

Jadi plugin alignment ini support php, css dan bahasa pemrograman yang lainnya.
Jadi itu saja mungkin dua plugin sederhana yang sudah kita coba pada materi kali ini, yang pertama tadi ada Siderbar Enhancements lalu kemudian yang ke-dua ada aligntment. Mudah – mudahan kedua plugin ini dapat membantu temen – temen untuk mempercepat coding nya.

Baiklah sampa disini dulu untuk pembahasan mengenai plugin Sidebar Enhancements & Alignment silahkan jika ada yang mau menambahkan atau ada yang mau ditanyakan dapat temen – temen tuliskan di kolom komentar dibawah dan insya allah saya akan cepat membalas setiap pertanyaan nya.

Baiklah selanjutnya kita masih dalam seri sublime text dan untuk pembahasan materi berikutnya yang akan kita bahas adalah Tutorial Sublime Text 3 - #15 Coding Modes

Saya admin dari blog lupacode undur diri, sampai bertemu dalam pembahasan tutorial selanjutnya


Wassalamualaikum Wr. Wb

Sabtu, 22 April 2017

Tutorial Sublime Text 3 – #13 Color

Assalamualaikum Wr. Wb

Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #12 Emmet (Bagian 3) bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman DaftarIsi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.



Pada kesempatan kali ini yang akan kita bahas masih pada seri tutorial sublime text 3, dimana pada materi sebelumnya kita sudah mempelajari bagaiamana menginstal sebuah plugin yang menurut saya sangat keren sekali untuk membantu kita dalam ngoding dengan sangat cepat. Namun pada materi kali kita akan bahas mengenai dua buah plugin, plugin nya sederhana saja engga sesulit plugin-plugin yang lainnya seperti emmet misalnya, plugin ini memudahkan kita sebagai web desainer apalagi yang sering bekerja dengan css.

Ada dua buah plugin warna yang berhubungan dengan css, kita lihatb contoh kasus nya terlebih dahulu, misalkan begini saya punya sebuah file css dan didalam nya ada dua buah atribut yang berhubungan dengan warna seperti ini

body {
 font-family: arial, sans-serif;
 background-color: lightblue;
}

h1 {
 color: darkgrey;
}

Saya punya dua buah property warna, yang pertama ada background color dan yang kedua ada color. Untuk background color saya set dia jadi lightblue atau biru muda, lalu untuk color atau tulisan saya set dia jadi darkgrey atau abu-abu tua.

Nah misalkan gini, kalau misalkan saya mau ganti warna itu kan ada beberapa cara pertama kita bisa ganti dengan menuliskan nama warna nya misalkan red, atau royalblue atau banyak warna yang lainnya. Tapi kita juga selain nama warna kita juga bisa pakai hexa misalnya #000000 ada 6 digit dan itu warna nya hitam, sedangkan untuk warna putih adalah #ffffff lalu semua kombinasi hexa warna antara 000 dan fff itu jadi warna yang lain, tapi kita kan ga mungkin hafal semua kombinasi warna di hexa ini, jadi misalkan kalau kalian ingin memberi warna diluar warna yang tadi tentunya kalian butuh kombinasi warna hexa ini, nah biasnanya kita kan membutuhkan bantuan aplikasi lain seperti paint untuk menampilkan color picker nya, atau kalian pakai photoshop atau aplikasi di web ada unutk menampilkan warnanya.

Tapi alangkah lebih bagus nya jika sublime text punya fasilitas color picker itu, supaya kita gampang milih warnanya. Nah untungnya ada plugin di sublime text 3 ini yang namanya color picker sekarang kita coba instal saja pluginnya. Kita masuk ke dalam menu Preferences -> Package Control atau kalian juga gunakan shortcut nya dengan tulis CTRL+SHIFT+P kemudian kita tulis di pencariannya install kemudian kita pilih install package atau kalian bisa tekan enter lalu kita tunggu sebentar, kemudian kita cari plugin yang namanya colorpicker, kita tulis saja colorpicker tinggal dipilih saja kemudian kita tekan enter


Kita tunggu proses download nya dan ini tergantung koneksi internet yang sedang kita gunakan. Kemudian kalau sudah terinstall akan ada notifikasi dibawah nya “colorpicker successfully installed” oke sekarang kalau sudah selesai terinstal misalkan saya mau ganti warna color nya, saya hapus dulu warna yang diatas, kemudian kita tekan shortcut untuk menampilkan colorpicker nya yaitu dengan menekan CTRL + SHIFT + C maka akan keluar color pickernya seperti ini


Kemudian kita tinggal pilih saja warnanya sesuai dengan keinginan kita, sama seperti kita menjalankan aplikasi seperti paint atau photoshop atau aplikasi web yang menampilkan warna untuk fasilitasnya.
Oke sudah yah untuk menampilkan plugin nya sekali lagi kita hanya cukup tekan CTRL + SHIFT +C maka akan langsung keluar color pickernya jadi itu sangat gampang banget untuk  kita memilih jenis warna yang kita inginkan tanpa kita harus menghafal hexa warna nya karna itu gak mungkin mengingat jumlah kombinasi hexa nya itu mencapai ribuan.

Sekarang kita lihat hasil hexa nya, itu di tulis dalam huruf besar.


Kalau kalian engga suka huruf besar kalian dapat merubah untuk hasilnya hexa nya berubah menjadi huruf kecil. Caranya adalah sama seperti kalian mengkonfigurasi plugin – plugin lain. Kita masuk ke dalam menu Preferences -> Package Setting -> nah biasanya disana sudah ada plugin-plugin yang sudah terinstal, kemudia kita lihat yang Color picker


Kemudian pilih dulu yang default, dan selalu biasakan untuk memilih dulu yang default. Kemudian kalian dapat melihat setting default nya seperti dibawah ini.


Lalu kemudian kalian dapat lihat disalah satu item nya yaitu ada “color_upper_case”: true  nah untuk merubah settingan default nya menjadi huruf kecil nah yang true itu kalian tinggal gant menjadi false. Tapi biasakan jangan diganti di default nya, ini berlaku untuk semua plugin juga sama yah jangan biasakan merubah settingan pada setting – default. Tapi jika kalian ingin merubah nya kalian masuk ke dalam setting – user nah pada setting userlah kalian boleh merubahnya. Kenpa ga boleh mengganti pada saettingan default ? jika nanti kalau kalian update sublime text nya maka semua settingan atau konfigurasi nya akan hilang.

Baiklah sekarang kita ganti dengan cara membuka settingan user nya dengan cara sama seperti diatas pada cara membuka setttingan default. Ketika kita buka setting- user untuk color picker maka didalam nya masih kosong, nah sekarang kita copykan terlebih dahulu “color_upper_case”: true  yang terdapat pada setting – default ke dalam setting – user. Tapi jangan lupa untuk menambahkan dulu { } kedalam setting – user sebelum naruh scriptnya karena ini bentuknya javascript object. Selanjutnya kita ganti dengan false, jadi settingan user ini akan menimpa atau mengoveride settingan default.

Oke baiklah kalau sudah kita akan langsung mencobanya kembali, dengan cara menekan CTRL + SHIFT+C untuk menampilakn Color picker nya, kemudian kita pilih salah satu warna dan lihatlah sekarang hexa codenya sudah berubah menjadi huruf kecil semua.

Sekarang kita masuk kedalam plugin yang ke-dua. Plugin yang kedua masih ada hubungannya dengan warna, kalau tadi kita menginstal plugin color picker itu fungsinya untuk menampilkan warna yang tersedia, tapi kali ini bagaimana suatu hexa warna yang sudah kita tulis, misalnya hexa warna #fff888 apakah denga melihat code hexa warna itu kita akan ingat apakah itu warna apa yang kita masukan ? saya sendiri engga ingat, mengingat banyaknya code hexa warna ini. Nah jadi  dengan plugin ini kita dapat mengetahui warna apa yang sudah kita masukan. Baiklah dari pada kalian bingung, langsung saja kita download pluginnya terlebih dahulu

Seperti biasa saya ketikan CTRL + SHIFT + P untuk memunculkan command pallete nya, lalu kita tuliskan dalam pencariannya COLOR lalu sekarang kita pilih yang color highlighter


Silahkan di klik saja kemudian kita tunggu proses download dan instalasi nya. Mungkin ini memakan waktu yang cukup lama karna ukuran plugin color highlighter sendiri cukup besar ukurannya. Baiklah kalau sudah selesai kita akan langsung mencoba nya kembali.

Sebelumnya dapat kalian lihat jika plugin highlighter ini sudah berhasil di instal maka setiap kode warna yang sudah kita tuliskan itu akan ada garis bawahnya dan garis bawah itu menunjukan warna dari kode hexa itu sendiri. Kalau ingin lebih jelas kita dapat mengklik hexa warna yang sudah kita tuliskan, dan sekarang kalian lihat




Tulisan kode hexa itu sekarang mempunyai background dan warna background nya sama dengan warna hexa nya.
Oke baiklah mungkin itu dua plugin yang saya gunakan untuk membantu saya dalammengenali warna dan memilih warna, silahkan kalau kalian inginstal tingga instal saja seperti yang sudah saya jelaskan pada tutorial diatas.

Mungkin sampai disini dulu untuk pembahasan materi mengenai Color nya, selanjutnya kita masih akan membahas mengenai seri pada sublime text 3 ini. Kita langsung saja kedalam materi berikutnya yaitu

Tutorial Sublime Text 3 – #14 Sidebar Enhancements & Alignment

Download Sistem Management Project

Assalamualaikum Wr. Wb

Selamat siang sahabat lupacode semuanya, salam coding dari saya selaku admin dari blog lupa code ini. Gimana kabar kalian hari ini ? semoga kita selalu baik – baik saja yah. Alhamdulilah pada kesempatan kemarin saya sudah share mengenai Source Code Sistem Penjualan Toko Buku bagi sahabat lupacode yang ingin mengunduh program aplikasi berbasis web yang dibuat menggunakan bahasa pemrograman PHP MYSQL yaitu Sistem Penjualan Toko Buku temen-temen dapat langsung mengklik tautan atau url diatas atau juga sahabat semua dapat masuk ke halaman daftar isi untuk mengetahui semua yang telah saya sahare didalam blog ini baik itu tutorial ataupun source code aplikasi.

Sistem Management Project

Sistem Management Project - Lupacode


Programa aplikasi management project ini dibuat menggunakan bahasa pemrograman yang sangat familiar yaitu dibuat mengguanakan PHP MYSQL. Bagi sahabat lupa code yang sedang belajar membuat sebuah aplikasi berbasis web mungkin source code sistem management project ini dapat dijadikan kembali bahan untuk belajar atau temen – temen dapat mengembangkan kembali sistem management aplikasi berbasis web ini agar dapat menjadi lebih baik lagi. Jelas itu sudah menjadi tugas temen – temen semua agar dapat berkreasi atau dapat bereksperimen dalam mengembangkan source code aplikasi management project berbasis web ini.

Sistem Management Project 1- Lupacode

Source code aplikasi management project ini saya dapatkan dari salah satu website yang sama dalam membahas seputar pemrograman, dan saya dapatkan source code management ini dari blog Lapakcode saya sangat mengucapkan banyak terimakasih kepada ceo dari blog lapakcode yang telah berbagi aplikasi berbasis web ini dan saya banyak mengambil pelajaran dari blog lapakcode mengenai source code yang telah ia share kepada publik.

Sistem Management Project 2- Lupacode

Selain blog lapakcode ada juga yang membahas atau membagikan sourcecode aplikasi management ini secara gratis kepada publik dan mungkin aplikasi berbasis web ini sudah tidak susah lagi untuk kita dapatkan karna sudah banyak yang membagikan source code ini secara gratis untuk dapat dipakai atau dapat dikembangkan lagi oleh kita yang ingin menggunakan source code program management project ini

Adapun fitur – fitur yang ada di dalam program management project ini sudah lumayan cukup lengkap salah satu diantaranya data yang dapat diolah menggunakan source code sistem management project ini adalah 

Fitur Sistem Management Project
Master Referensi
Data Project
Progres Prohect
Laporan Project
Grafik Project
Grafik Nilai Project
Grafik Progress Project
and any more

Nah kalian dapat lihat untuk fitur yang dimiliki oleh aplikasi management project ini sudah lumayang cukup lengkap yah untuk kita mengolah data dengan mengggunakan aplikasi berbasis web tersebut. jadi sekali lagi silahkan untuk temen – temen semua yang ingin memiliki source code ini karna disini saya membagikannya secara gratis untuk teman – teman gunakan atau kembangkan lagi aplikasinya sehingga dapat menjadi lebih baik


Selanjutnya untuk aplikasi management project ini dibuat dengan menggunakan bahasa pemrograman yang saat ini sangat familiar atau saat ini sedang update diantara nya adalah 

Create Aplication
PHP 7.0.5 PDO
MYSQL
Twitter Bootstrap
Ajax
Highcharts
Data Table
and any more

Untuk cara penginstalan atau cara pemasangan aplikasi ini, temen – temen dapat mengunjungi artikel saya yang telah membahas mengenai bagaimana cara menginstal atau memasang aplikasi berbasis web pada komputer kita sendiri yang dijadikan web server dengan menggunakan bantuan aplikasi lain seperti xampp dll. Jadi silahkan saja masuk kedalam pembahasan materi DOWNLOAD SISTEM INFORMASI ALUMNI untuk mengetahui bagaimana cara menginstal aplikasi berbasis web ini di dalam komputer kita sendiri.

Baiklah disini saya ingatkan kepada temen – temen semua bahwa jika kita menggunakan aplikasi tersebut mohon untuk menghargai karya pembuat aplikasi nya. Yaitu dengan cara tidak menghapus link credit yang ada didalam aplikasi tersebut karna itu merupakan suatu sikap tidak menghargai karya orang lain, dan saya yakin temen – temen sahabat lupacode tidak sepert itu pastinya.

Sistem Management Project 3- Lupacode

Jadi silahkan untuk temen – temen yang ingin mendownload aplikasi berbasis web ini dapat dengan mudah mendownload nya secara langsung karena saya sudah sediakan button download nya dibawah ini. Jadi temen – temen tinggal klik saja button download tersebut dan kemudian akan di arahkan kedalam halaman Google Drive dimana source code aplikasi management project ini disimpan di dalam Google Drive Tidak ada iklan apapun didalam link download nya sehingga temen – temen tidak dipusingkan dengan diarahkan dulu ke halaman iklan nya dan membuat kita merasa terganggu akan hal itu.

Baiklah saya rasa cukup untuk membahas mengenai aplikasi management project ini silahkan bagi temen – temen yang ada pertanyaan dapat bertanya di kolom komentar dibawah yang telah tersedia, atau mungkin ada temen – temen lainnya yang ingin menambahkan mengenai aplikasi management project ini silahkan ditambahkan saja kolom komentar yah, agar temen  - temen yang lainnya juga dapat melihat tambahan yang ingin temen-temen berikan.


Download yuk Source Code Sistem Management Project Secara Gratis di Blog Lupacode dan jangan lupa bantu like juga yah fanspage Lupacode untuk kemajuan blog ini ^-^


Note : Sahabat Lupacode yang baik jika ingin memposting ulang atau ingin membagikan ulang artikel ini harap cantumkan yah sumber nya 

Message : Download Juga Source Code Yang Lainnya Yuk !

Oke baik selamat berjumpa kembali di lain kesempatan dan di materi – materi selanjutnya yang akan saya bahas disini, jadi pastikan temen – temen selalu update yah mengenai tutorial pemrograman yang akan saya bahas disini, khususnya bagi temen – temen yang ingin belajar bareng – bareng bersama saya disini. Saya admin dari lupa code undur diri mohon maaf apabila banyak kesalahan serta kekurangan terimakasih telah berkunjung J

#Salam_Coding


Wassalamualaikum Wr. Wb

Tutorial Sublime Text 3 – #12 Emmet (Bagian 3)

Assalamualaikum Wr. Wb

Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #11 Emmet (Bagian 2) bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman DaftarIsi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Lupacode - Tutorial sublime text emmet

Kita masih akan melanjutkan materi tutorial sebelumnya yaitu masih dalam materi sublime text dimana pada artikel kali ini kita sudah masuk kedalam bagian terakhir dalam materi pembahasan mengenai plugin emmet. Ini merupakan materi tutorial bagian 3 dimana pada bagian1 dan 2 telah kita bahas pada artikel sebelumnya, jika kalian belum mempelajari materi yang sebelumnya maka saya sarankan terlebih dahulu untuk mempelajari materi materi sebelumnya.

Baiklah sekarang kita akan mencoba yang CSS dalam menggunakan plugin emmet, pada materi sebelumnya kita telah membuat sebuah struktur html sederhana dengan menggunakan perintah atau syntax dari emmet tersebut. untuk css misalkan saya mempunya sebuah file css, dan saya ingin memberi style pada sebuah div yang berada didalam folder yang sama. Kita masih menggunakan folder latihan yang sebelumnya diaman kemarin kita sudah memuat file index.html sebagai contoh. Sekarang saya sudah membuat satu file css dan saya beri nama style.css

Didalam css jika kita ingin memberikan sebuah style pada elemen tertentu, misalkan saya ingin memberikanstyle pada class container,. Maka saya tuliskan seperti ini


.container{
 Widht: 20px;
 Height: 20px;
  }

Jika kita menggunakan fasilitas sublime text biasa dan kita menuliskan nya satu persatu secara manual, nah tidak kalau untuk emmet. Didalam emmet misalkan kita ingin menuliskan widht:20px; maka kita cukup menuliskan w20 kemudian kita tekan tab, ,maka otomatis akan dibuatkan widht sebesar 20px.
widht:20px;

begitupun untuk heigt juga sama, kita hanya perlu tuliskan saja h20 maka akan dibuatkan height sebesar 20px. Kalau mau persen widhtnya agar responsive kalian cukup tulis w80p widht 80 dan p untuk persen, maka akan langsung dibuatkan
widht:20%;

lalu misalkan saya mau kasih margin, kalau dalam sublime text kita tuliskan margin: 20px; tapi kalau dengan menggunakan emmet kita cukup m20 kemudian tekan tab, maka akan langsung dibuatkan margin sebesar 20px untuk ke empat sisinya. Gimana kalau saya mau ngatur sisi sisinya berbeda ? kalian ingat kan kalau saya tulis margin: 20px auto; itu artinya  dan kanan 20% sedangkan untuk atas dan bawahnya adalah auto, kalau pakai emmet kalian cukup tulis m20-auto kemudian kita tekan tab maka akan langsung dibuatkan seperti contoh diatas.

Untuk padding juga sama kita tuliskan p10-20-30-40 kemudian kita tekan tab
padding: 10px 20px 30px 40px;
Berarti ini atas kanan bawah dan kiri. Sekarang kita coba lagi misalkan saya mau kasih color maka saya cukup tulis c kemudian tekan tab
Color: #000;
Kita akan langsung dibuatkan dengan nilai otomatis warna nya adalah hitam.

Sekarang misalnya kita mau tulis background color, kita cukup tulis bgc kemudian kita tekan tab
background-color: #fff;
kalau misalkan kita mau memberikan color sendiri, kita cukup ketik c#0 kemudian tekan tab maka akan dibuatkan
color: #000;
untuk background color juga sama kita hanya cukup ketikan bgc kemudian # kemudian code color nya. Misalnya seperti ini bgc#123123; kemudian tekan tab

background-color: #123123;

masih banyak yang lain yang belum saya kasih contoh disini, nanti kalian tinggal lihat dokumentasi nya saja. tapi dengan ini saja ini sudah mempercepat coding saya di css dan html.

Lalu selanjutnya ini yang keren juga misalnya saya menuliskan border-radius: seperti itu yah lalu saya isi border-radius: 30px; ini adalah property css 3 mungkin sekarang sudah di support untuk semua browser. Tapi ada property yang ga di support oleh semua browser dan kalian ingin ngasih vendor prefict kita tambahkan diatasnya –webkit-border-radius: 30px; terus nanti ada mozilla, opera dan lain sebagainya dan cukup ribet kalau kita tuliskan satu persatu dengan emmet kalian cukup tulis –bdrs lalu tekan tab


-webkit-border-radius: ;
-moz-border-radius: ;
-ms-border-radius: ;
-o-border-radius: ;
border-radius: ;

dan kita tinggal tulis misakan 30px lalu semua nya berubah dan kita tinggal menekan esc untuk mengembalikan kursor nya menjadi satu.

Kemudian yang terakhir kalau kalian bekerja dengan css pada saat menulisakan atribut nya atau menuliskan property nya emmet itu melakukan parzi searching sama seperti mungkin kalau kita tekan CTRL+SHIFT+P untuk command palette seperti yang pernah kita bahas pada materi sebelumnya.

Misalnya jika kita akan menambahkan background-image maka kita tidak perlu menuliskan semua huruf yang ada pada background image tersebut, kita cukup menuliskan huruf apa saja yang ada didalam kata background image tersebut, misalkan saya tulis baim maka otomatis paziz searching berlaku disini dan sublime text akan langsung menawarkan pilihan yang kita maksud.

Contoh lain misalkan saya ingin menambahkan font family maka saya tidak perlu menuliskan semua kata tersebut, yang hanya perlu saya tuliskan adalah huruf yang ada di kata font family terserbut. Maka secara otomatis sublime text akan menawarkan pilihan yang kita maksud dan kita tinggal klik saja atau tekan enter saja.

Atau misalkan saya ingin menambahkan text-decoration kata text yang didepan nya bisa saya lewat dan saya hanya perlu tulis deco maka sublime text sudah menawarkan pilihan yang saya maksud.

Oke mungkin sampai sini kalian sudah bisa lihat bahwa emmet itu sangat memudahkan, dan itu adalah salah satu plugin yang sangat populer di sublime text dan silahkan kalian instal serta kalian elajari sendiri lebih dalam lagi mengenai emmet.

Kalau kalian ingin melihat secara detailnya kalian dapat kembali balik lagi mengunjungi halam website nya yaitu www.emmet.io atau kalian bisa juga masuk langsung ke halaman documentasi nya docs.emmet.io atau kalian dapat mengklik documentation pada halaman utama emmet nya. Dan kalian akan langsung diarahkan kesini

Lupacode - Tutorial sublime text emmet 1

Kalian dapat lihat disana banyak sekali penjelasan mengenai emmet itu, kalian bisa coba – coba sendiri dan kembangkan sendiri agar kalian dapat lebih menguasai lagi syntax – syntax emmet itu. Dan saya yakin ini akan jauh lebih membantu dalam hal coding kalian, kalian bisa ngoding dengan sangat cepat apabila kaian sudah tau shortcut atau perintah – perintah yang harus kalian gunakan untuk mempercepat coding kalian 

Baiklah sampai sini dulu untuk pembahasan materi mengenai emmet bagian ke tiga ini, dimana ini adalah materi terakhir dalam membahas mengenai emmet. Selanjutnya kita masih dalam pembahasan mengenai sublime text dan kita akan lanjutkan ke dalam materi selanjutnya yaitu
Tutorial Sublime Text 3 – #13 Color

Jumat, 21 April 2017

Tutorial Sublime Text 3 – #11 Emmet (Bagian 2)

Assalamualaikum Wr. Wb

Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #10 Emmet (Bagian 1) bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman DaftarIsi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Tutorial Sublime text 3 - Emmet bagian 2 Lupacode.net

Pada artikel atau materi sebelumnya kita telah mempelajari mengenai plugin emmet, dan kita sudah membahas mengenai bagaimana cara menginstal nya, kemudian syntax penulisannya untuk kita terapkan kedalam html.

Baiklah pada pembahasan materi kali ini kita akan melanjutkan mengenai plugin emmet yang kemarin dimana pada materi kali ini merupakan materi yang ke dua didalam pembahasan plugin emmet tersebut. sekarang kita akan membahas mengenai syntax – syntax yang dimiliki oleh emmet ini, yang nantinya akan kita gunakan untuk menyingkat kode penulisan html. Pada materi sebelumnya saya hanya menuliskan beberapa karakter lalu ketika saya tekan tab kemudian dibuatkan lah struktur html yang cukup lengkap dan banyak

Ada beberapa syntax atau keyword yang harus kita ketahui, dan pada materi kali ini kita akan bahas satu – persatu secara detail bagaimana tentang cara penggungaan nya. Baiklah kita mulai saja, ini kita akan melanjutkan dari studi kasus kita yang pada materi sebelumnya yaitu pada bagian 1

* Keyword > “lebih besar dari”

Keyword yang pertama harus kalian tau di emmet adalah > “lebih besar dari” yah dan ini adalah untuk menyimpan tag didalam tag lain. Contoh nya begini misalnya saya punya elemen div lalu didalam div saya mempunyai sebuah paragraf misalnya, jadi kita hanya perlu menulis seperti ini

div>p

“Buat elemen div lalu didalam nya tulis elemen p” kemudian simpan kursor nya di akhir lalu tekan tab maka akan dibuatkan seperti ini

<div>
          <p> </p>
</div>

Atau kita juga bisa menambahkan menjadi tumpuk didalam nya, misalkan kita menambahkan span didalam p

div>p>span

kemudian seperti biasa letakan kursor nya di akhir lalu tekan tab, maka akan dibuatka span didalam p

<div>
          <p> <span> </span> </p>
</div>

Oke jadi itu tanda lebih besar dari “>” itu artinya simpan atau buat elemen didalam elemen lain. Lalu yang lebih keren seperti ini, kalau misalkan saya tulis

.container

Kemudian saya tekan tab, maka akan dibuatkan div dengan class container

<div class=”container”> </div>

Tapi kalau saya buat paragraf lalu saya tuliskan seperti ini misalnya

p>.tulisan

ini emmet akan sangat cerdas membaca bahwa didalam p itu yang dibuat bukan lah div melainkan span Karna itu inline dan blok elemen nya

<p><span class=”tulisan”> </span></div>

Sama juga seperti saya punya ul dan didalamnya saya tulisan misalkan .link

ul>.link

maka emmet akan dengan sangat cerdas membaca dia akan membuat elemen <li>

<ul>
          <li class=”link”> </li>
</ul>

*Keyword + “tanda plus”

Kalau plus ini untuk membuat elemen yang sejajar. Jadi bukan anak dari atau elemen didalam nya tapi sejajar dengan elemen yang kita buat. Seperti ini misalkan

div+p

Saya punya div plus p maka akan dibuat sejajar bukan didalmnya, seperti ini hasilnya

<div> </div>
<p> </p>

Bagaimana paham yah sampai sini, jadi misalkan contoh lagi jika saya tulis seperti ini

div.p+a

maka ini akan membuat sebuah tag div dan didalam nya ada paragraf dan ada a

<div>
          <p></p>
          <a href=””> </a>
</div>

*Keyword * “tanda bintang”

Kemudian selanjutnya ada keyword tanda bintang atau multipikasi atau perkalian yah, jadi contohnya saya bisa bikin

ul>li*10

saya mempunyai <ul> lalu didalam nya saya punya <li> dikali 10 lalu saya tekan tab, maka akan dibuatkan ul yang didalmnya ada li sebanyak 10

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Ya jadi ini sangat memudah kan sekali bagi saya.

*Keyword () “kurung buka dan kurung tutup”

Selanjutnya ada keyword kurung buka dan kurung tutup ini adalah untuk membuatkan grouping. Contohnya seperti yang sudah saya lakukan pada materi sebelum nya yaitu pada bagian 1, atau seperti ini misalnya

.container>(.header>ul>li*4)+(.main>h2)

Dapat kalian lihat ini seperti matematika saja, jadi group yang pertama ada didalam kurung akan 
sejajar dengan group yang ke dua. Kemudian simpan kursor nya di akhri lalu tekan tab


<div class="container">
 <div class="header">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>
 <div class="main">
  <h2></h2>
 </div>
</div>

Dan kalian dapat lihat sekarang saya mempunyai dua buah div yang sejajar dan masing – masing memiliki elemen di dalamnya.

*Keyword {} “kurung kurawal”

Selanjutnya ada keyword tanda kurawal dan ini fungsinya untuk membuat text di dalamnya. Misalkan saya akan menuliskan sebuah text di dalam paragraf misalnya seperti ini

P{Hello emmet}

Maka akan dibuat kan sebuah paragraf dengan text hello emmet

<p>Hello emmet</p>

*Keyword $ “tanda dollar”

Selanjutnya ada keyword tanda dolar, dan ini berfungsi untuk menambah kan urutan angka pada teks. Cotohnya begini, kalau tadi kita sudah mencoba mengisi tulisan pada sebuah tag paragraf

P{Hello emmet} namun sekarang kita tambahkan tanda dolar p{Hello emmet $}

Maka sekarang hasilnya akan seperti ini

<p>Hello emmet 1</p

Sekarang dia akan menambah angka satu, nah ini akan sangat memudahkan ketika kalian bikin banyak list misalnya atau banyak elemen. Misalnya seperti ini

ul>li*10>{item $}

Saya punya ul dan didalmnya ada li sebanyak 10, kemudian kita tambahkan tanda dolar sehingga urutannya akan secara otomatis mengurut.


<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
</ul>

Kalian bisa tambahkan dolarnya lebih dari satu untuk menambah kan angka 0  misalkan kalian ingin manambah kan 3 digit sperti ini $$$ maka nanti item pertama akan tertulis 001 dan seterusnya.

*Keyword Lorem

Masih ingat jika kita menuliskan lorem kemudian kita tekan tab maka akan langsung dibuatkan text acak atau random, dan saya lupa berapa karakter untuk itu entah 80 atau 100 yah, nah kalau kalian pakai emmet  kalian tekan lorem kemudian kalian tekan tab nah dia akan membuat 40 kata ini lebih sedikit

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat”

kalau ingin lebih banyak kalian dapat tambahkan mau berapa kata, misalnya 100, kalian cukup tulis lorem100 kemudian tekan tab maka secara otomatis akan dibuatkan sebanyak 100 kata nah jadi mudah sekali. Misalkan saya ingin membuat seperti ini

p*4>lorem10

kemudian saya tekan tab


<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed eiusmod</p>

Saya buat empat buah paragraf dan masing – masing terdapat 10 kata.
Jadi itulah syntax – syntax atau keyword – keyword yang dimiliki oleh emmet dan kita sudah mencobanya semua.

sekarang kalian telah mengetahui semua stntax emmet nya, nah saya punya sebuah struktur html seperti dibawah ini

Tutorial Sublime Text 3 – #11 Emmet (Bagian 2)

kemudia coba kalian bisa ga bikin struktur html dibawah ini pake satu baris perintah atau syntax dari emmet, nah coba kalian tuliskan syntax nya untuk kalian latihan belajar menggunakan syntax emmet. Kira – kira seperti apa coba kalian latihan sendiri.

Nah setelah ini silahkan kalia bisa bermain main dengan syntax nya untuk menghasilkan struktur html yang lain. Jika ada yang bingung atau ada yang mau ditanyakan silahkan seperti biasa tulis saja di kolom komentar yang telah tersedia dibawah postingan ini, atau kalian bisa juga kirim email dengan mengisi form contact pada blog ini, jika tidak ada halangan apapun maka akan saya balas dengan cepat pertanyaan – pertanyaan yang teman teman tanyakan


Baiklah sampai sini dulu untuk pembahasan materi bagian ke dua kali ini dan kita akan melanjutkan ke dalam materi bagian 3 yaitu Tutorial Sublime Text 3 – #12 Emmet (Bagian3)