Jumat, 14 April 2017

Tutorial Sublime Text 3 – #1 Instalasi

     Assalamualaikum Wr, Wb. Hallo selamat pagi sahabat lupacode semuanya, selamat datang kembali saya ucapkan kepada temen-temen lupacode, alhamdulilah pada kesempatan kali ini saya masih diberikan umur, serta nikmat sehat yang tiada duanya untuk dapat berbagi ilmu lagi kepada semua temen-temen yang sama-sama sedang belajar bahasa pemrograman.

Tutorial Sublime Text 3 – #1 Instalasi

      Masih bersama saya selaku admin dari blog lupacode ini, dan pada pembahasan materi tutorial kali ini kita akan mempelajari mengenai tutorial sublime text 3. Tujuannya adalah agar temen-temen semua mahir dan jagoan menggunakan sublime text nya agar nantinya lebih cepat lagi untuk ngodingnya. Sekarang yang pertama kali akan kita lakukan sebelum temen-temen jagoan menggunakan sublime text tentu saja kalian harus mendownload terlebih dahulu si sublime text nya. Jadi gimana kalian mau jago kalau sublime text nya belum terpasang pada sistem operasi kalian.
    Yang pertama kalian harus mengunjungi dulu website resmi dari sublime text nya, yaitu www.sublimetext.com berikut adalah tampilan home pagenya

Tutorial Sublime Text 3 – #1 Instalasi

     Lalu kalian masuk kedalam halaman download. Kalian tinggal mendownload sublime text tersebut dengan menyesuaikan pada sistem operasi yang kalian pakai saat ini. Lalu kalian tinggal klik saja, kemudian setelah kalian selesai mendownload kalian tinggal menginstal nya pada sistem operasi kalian masing-masing.
     Cara penginstalann nya cukup mudah, kalian tinggal next dan next saja lalu sublime text sudah siap digunakan. Sublime text yang harus kalian download adalah sublime text versi 3. Kenapa saya menyarankan versi 3 ? karna versi 3 ini dibuat menggunakan phyton 3 sedangkan untuk sublime text versi 2 dibuat masih menggunakan phyton versi 2. Dalam segi tampilan baik versi 2 maupun versi 3 sama saja. 
      Nanti untuk kedepannya atau pada materi selanjutnya saya akan menjelaskan bagaimana cara memasang plugin pada sublime text. Karna pada setiap code editor yang bagus itu mempunyai plugin. Ada beberapa plugin yang bagus yang sering digunakan, dan itu hanya jalan di sublime text versi 3 saja. jadi di sublime text 2 itu ga otomastis jalan, harus ada konfigurasi yang harus dilakukan dan kadang-kadang tidak mudah. Jad saya sarankan kepada temen-temen juga supaya nanti kita bareng – bareng belajarnya agar memakai sublime text yang versi 3.

           Sebetulnya software sublime text 3 ini adalah software berbayar, kalo kita lihat pada menu buy dihalaman sublime text tersebut, harganya adalah $70 (Tujuh Puluh Dollar). Walaupun kita dapat menggunakannya dengan bebas. Perbedaannya yang free dan premium yaitu hanya nanti pada aplikasi sublime text itu ada tulisan UNREGISTRED saja. lalu nanti dalam bebrapa kali save akan muncul notifikasi untukmembeli software ini. Tapi lepas dari dua hal itu fungsinya sama mau yang free atau yang premium kalian bisa sama-sama pake. Jadi kalau misalkan kalian masih belajar membuat aplikasi, membuat web kita pake versi yang gratisnya gapapa, tapi nanti suatu saat kalian sudah sering banget pake software ini apalagi kalian sudah menghasikan uang dari sublime text 3 ini, ga ada salahnya jika kalian membeli lisensi nya untuk berkontribusi kepada developer dari sublime text ini.
       Sekarang kita akan coba membuka software sublime text yang telah kita download dan instal sebelumnya, kira – kira seperti inilah penampakan dari sublime text versi 3 ini

Tutorial Sublime Text 3 – #1 Instalasi 1

        Inilah sublime text yang akan kita gunakan pada materi kali ini. Kala kalian lihat ini sederhana aja sama seperti notepad terdapat area kerjanya disana untuk menuliskan. Di atasnya ada menu bar lalu disebelah kanan terdapat kotak yang kecil, itu disebutnya minimap, ini akan sangat membantu ketika nanti source code kalian sudah sangat panjang sekali.
      Sekarang kita coba ketikan source code lalu kita bikin code html sederhana saja. masih ingat untuk menulis sebuah file html kita awali dengan <html> dan di akhiri dengan </html> kalau kita ketik manual, lalu didalam nya ada <head> lalu tutup lagi ada </head> semuanya serba manual kita tulis. Nah kenapa kita pake code editor, kenapa kita pake sublime ? supaya lebih mudah pengerjaanya. Sekarang kita lihat bagaimana sublime text membuat hal ini menjadi lebih mudah,
     Jadi hal yang pertama yang harus kalian biasakan lakukan dalam membuat file baru, ketika kanvas nya kosong atau area kerjanya kosong, kita save dulu file nya, Masuk ke menu file -> save -> atau dengan menekan CTRL + S pada keyboard, lalu kalian save terlebh dahulu filenya dan jangan lupa kasih extensi file nya, misalnya html, php, css, atau javascript/js. Disini kita coba buat file html dan kita beri nama index.html
    Ketika kita sudah save filenya, kalian bisa lihat di sebelah kanan bawah itu berubah menjadi HTML

Tutorial Sublime Text 3 – #1 Instalasi 2

      Kalau sebelum tadi kita save, itu sebelumnya adalah PLAIN TEXT. Karna sublime text belum mendeteksi file nya di extensi apa, kalian bisa coba lihat kalau kalian klik pada tulisan HTML akan keluar file – file yang didukung oleh sublime text dan banyak sekali. Nah jika sekarang kita sudah pilih HTML itu artinya si sublime text telah mendeteksi bahwa kalian akan membuat file HTML sehingga jika kita ketikan html pada area kerja sublime text seperti ini <html> kita lihat warna nya akan beda sendiri

Tutorial Sublime Text 3 – #1 Instalasi 3

      Nah ini yang disebut dengan syntax hightlighting. Membedakan mana yang syntax HTML dan mana syntax yang lain. Lalu kemudahan nya jika kita akan menuliskan tutup tag nya, maka ketika ketik </ akan langsung berubah menjadi </html> jadi hal kecil itu saja sudah dimudahkan. Tapi kita engga lakukan itu, kita cukup tulis html lalu tekan tab pada keyboard. Maka akan otomatis dibuatkan 

Tutorial Sublime Text 3 – #1 Instalasi 4

       Kemudian lebih kerennya lagi kita lihat, sekarang kursor nya ada dimana ? ada di title yah. Jadi kalau kalian tulis isi <title> nya, lalu kemudian kita tekan tab lagi pada keyboard maka kursornya akan langsung ke dalam bagian <body> yah jadi dimudahkan.
     Lalu ceritanya kalian mau bikin heading, kalian tulis h1 dan langsung tekan tab makan akan langsung dibuatkan tag <h1> </h1> lalu misalkan kalian mau kasih paragraf, kalian cukup ketikan p lalu tekan tab maka dibuatkan langsung tag paragrafnya yah. Lalu misalkan kalian mau tuliskan isi paragraf kalian bisa tuliskan lorem lalu tekan tab maka otomatis dibuatkan text sembarang untuk mengisi supaya kalian bisa lihat.
       Ketika kalian menuliskan sesuatu, kalian bisa lihat pada tab nya, akan bertanda bulat atau tanda lingkaran.

Tutorial Sublime Text 3 – #1 Instalasi 5

     Itu artinya file belum di save, kalau kalian tekan CTRL + S untuk menyimpan, maka akan berubah tandanya menjadi x. Itu artinya file sudah di save.

Tutorial Sublime Text 3 – #1 Instalasi 6

       Lalu kalian bisa lihat hasilnya kalau HTML, klik kanan pada area kerja sublime text, lalu pilih Open in Browser. Baik yah jadi itu sangat sederhana sekali cara pakainya nanti mungkin pada materi selanjutnya kita lihat yang lebih lanjut lagi cara mengkonfigurasi sublime text supaya menjadi sesuai dengan keinginan kalian.
     Baiklah sampai sini dulu untuk pembahasan materi sublime text kita yang pertama ini. Selanjutnya kita akan melanjutan ke dalam pembahasan materi yang ke dua dan masih mengenai sublime text yaitu Tutorial Sublime Text 3 – #2Pengenalan Antar Muka

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon