Sabtu, 15 April 2017

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka

     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 
      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 Daftar Isi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka

       Baiklah sekarang kita langsung saja membahas materi yang ke 2 dalam pembahasan Sublime text. Pada materi yang pertama kemarin, kita telah menginstal code editor sublime text pada Sistem operasi kita, dan kita juga telah mencoba menuliskan beberapa syntax kemudahan yang diberikan oleh software sublime text ini.
      Sekarang kita coba buka lagi aplikasi sublime text nya, Kalian dan kalian dapat lihat pada file latihan yang kemarin, tulisan atau syntax html didalam area kerja sublime text dibedakan warnanya oleh sublime text itu sendiri, warna untuk syntax html itu berwarna Merah, sedangkan yang warnanya putih itu dibaca sebagai text oleh sublime text.

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka

      Kalau misalkan kalian tambahkan atribut, misalkan kalian kasih id pada tag <h1> seperti ini
<h1 id="judul">Hello Word</h1>

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka 1

        Kalian bisa lihat warnanya juga akan beda, fasilitas ini namanya adalah syntax high lighthing dimana syntax dari bahasa pemrograman tertentu warnanya akan berbeda, jadi kalau misalkan ada warna yang tidak sesuai kalian bisa tau, “oh mungkin saya menuliskan sebuah syntax yang salah.”
Sebelum kita melakukan konfigurasi pada sublime text kita akan coba dulu bikin file lain ya, misalnya kita bikin css, kemarin kan bikin html sekarang kita coba bikin file lain. Untuk membuat file baru pada sublime text kita bisa ke menu file -> New file -> atau kita bisa langsung menekan CTRL + N pada keyboard. Jangan lupa di save dulu filenya dan kita beri nama style.css lalu kita save. Kemudian kita tuliskan body { } maka warna font nya akan berubah sesuai syntax nya. Kemudian jika kita tulis font-family dan ketika saya baru saja ketik fo ketika file nya css, sublime text nya tau, lalu dia menawarkan seperti ini

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka 2

       Jadi ini sangat membantu yah, kalau kalian ingin tau helper nya kalian bisa tekan CTRL + SPASI maka helpernya akan muncul, dan hebatnya lagi jika kalian ingin menuliskan font-family kalian bisa tulis ff nanti akan muncul helpernya, karna ini menggunakan zigzag searching jadi kalau misalkan di dalam atributnya hanya ada huruf yang kita ketikan nanti dia akan muncul. Kalian bisa lihat kalau untuk css, atribut dan value nya berwarna biru sedangkan untuk selector nya berwarna merah.
   Kemudian bagaimana kalau PHP ? kita buat file baru lagi, dan kita kasih nama home.php Kita ketikan php lalu tekan tab, maka dibuatkan struktur php nya, lalu misalkan kalian ingin membuat function, dan lihat

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka 3

   Ini helpernya sudah sesuai dengan bahasa pemrogramannya, kita bisa lihat syntax penulisan nya juga akan berbeda, ya itu jadi merupakan kemudahan di dalam sublime text. Sekarang bagaimana jika kita ingin membuka sebuah file yang sudah ada, misalkan kita sudah punya source code, dan kita ingin buka semua file nya di dalam sublime text, misalkan saya ingin membuka 3 file yang sudah saya kita buat tadi, supaya lebih rapi fie yang 3 itu saya masukan kedalam sebuah folder dan saya beri nama folder itu Sublimetext.
   Nah kita akan membuka foldernya, bukan filenya biasanya saya melakukan seperti itu. Jadi pertama kalian bisa buka sublime nya, lalu kalian ke menu file -> Open folder -> lalu pilih folder yang akan kalian buka didalam sublime text tersebut kemudian klik Select Folder.

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka 4


      Lihat bedanya sekarang ada sebuah sidebar di sebelah kiri, dan ini memperlihatkan isi didalam folder yang kalian buka. Atau kita gunakan cara lain, yaitu dengan cara men-drag folder yang akan kalian buka ke dalam area kerja sublime text. Nah ini yang biasa saya lakukan, jadi saya engga buka filenya satu – persatu tapi yang saya lakukan adalah men-drag foldernya langsung ke dalam sublime text nya. Kemudian jika kalian ingin membuat file baru didalamnya juga sangat mudah, yaitu dengan cara klik kanan pada foldernya, lalu pilih New file

Tutorial Sublime Text 3 – #2 Pengenalan Antar Muka 5

     Kemudian kalian tidak hanya saja dapat membuat file baru, melainkan kalian juga dapat membuat folder baru, rename, delete dan lain sebagainya. Nah sekarang kalian sudah dapat lihat lingkungan dasar sublime text nya, di atas ada menu, dan dikiri ada sidebar, kemudian dikanan  ada minimap lalu di atas area kerja ada tab dari file-file yang sudah kita buka.
    Selanjutnya kalian bisa customisasi, misalnya kalian ga suka ada sidebar nya, kalian bisa hilangkan dengan cara klik view -> Side Bar -> Hide Side Bar atau kalian bisa juga dengan menekan CTRL + K, B dengan CTRL tetap di tekan, lalu tekan K, kemudian tekan B. pada keyboard, maka side bar nya akan disembunyikan. Nah side bar ini kadang – kadang kita perlu munculkan kadang tidak, jadi kalau kalian ingin memunculkan nya lagi kalian dapat klik view -> side bar -> Show side bar atau kalian bisa juga dengan menekan CTRL + K, B dengan CTRL tetap di tekan, lalu tekan K, kemudian tekan B pada keyboard.
      Kalau kalian ingin mengganti nama file yang sudah kalian buat, kalian dapat langsung klik kanan pada nama filenya kemudian pilih rename. Kemudian jika kalian ga suka ada mini map disebelah kanan, maka kalian cukup klik view -> Hide Minimap maka akan langsung disembunyikan, jika kalian ingin memunculkan nya lagi kalian dapat langsung klik view -> Show Minimap tapi biasanya kalau saya suka nya dimunculkan, karna kalau nanti sorce code kita sudah panjang nanti disebelah kanannya kelihatan.

        Lalu selanjutnya kita juga bisa menyembunyikan menu, kalian bisa klik view -> Hide Menu nah sekarang menu nya sudah di sembunyikan. Nah lalu gimana dong kalau saya mau memunculkannya lagi ? kalian ga perlu panik, atau menginstal ulang sublime textnya, ga perlu seperti itu yah. Gampang saja kalian tinggal tekan tombol ALT pada keyboard lalu menu nya kembali muncul lagi kemudia klik view -> Show menu. Kalau tadi alt itu memunculkan hanya sementara saja.
     Baiklah jadi itu sederhananya bagaimana mengatur lingkungan dari aplikasi sublime text 3 ini, selanjutnya kita masih akan membahas mengenai sublime text 3 ini, dan untuk pembahasan materi yang ke dua saya cukupkan sampai disini pembahasannya. Langsung saja kita masuk kedalam  materi selanjutnya yaitu

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