Pertemuan Ke 8 - Teknologi Web - Kebutuhan Software dalam Teknologi Web

PEMBAHASAN :

Beberapa Aplikasi Desain Website 

Aplikasi Untuk Menulis Kode Program

BEBERAPA APLIKASI DESAIN WEBSITE 

- WordPress

- Adobe Dreamweaver

- PageBreeze

- Bluefish Editor

- InVision Studio

- CoffeeCup HTML Editor

- KompoZer

1. WORDPRESS

WordPress adalah aplikasi pembuat website yang paling banyak digunakan saat ini.

Sebagai Content Management System, bentuk WordPress sejatinya bukanlah sebuah aplikasi, melainkan berbentuk file (untuk WordPress self hosting) dan berbentuk website untuk layanan instan.

Aplikasi ini bersifat gratis sehingga sangat populer di kalangan web developer.

Cara penggunaannya pun sangat mudah, yakni kita tinggal mengkombinasikan dengan plugin page builder seperti Elementor, Divi, atau guttenberg yang merupakan page builder internal dari WordPress 5.0.

Untuk mengoptimalkan website berbasis WordPress, saat ini para penyedia web hosting juga menghadirkan paket hosting khusus WordPress dengan spesifikasi serta fitur yang sudah di kustomisasi.

Mencoba kehandalan WordPress Hosting dengan memanfaatkan free trial selama 30 hari dari Qwords.com.

Adapun setelah masa trial sudah habis, nantinya Anda hanya akan dikenakan biaya berlangganan mulai dari Rp50 ribu saja perbulan.

Harga tersebut tentu sangat terjangkau bagi kalangan pebisnis yang menginginkan performa website profesional.

2. ADOBE DREAMWEAVER

Sejak beberapa tahun kebelakang, Adobe Dreamweaver menjadi aplikasi untuk membuat website yang cukup banyak direkomendasikan.

Pasalnya, aplikasi ini berperan sekali untuk membantu para pelaku industri kreatif khususnya web developer untuk merancang, menerbitkan dan mengedit tampilan situs web.

Ada banyak fitur powerfull di dalam aplikasi Adobe Dreamweaver, misalnya seperti editor WYSIWYG yang bisa menampilkan hasil editing secara langsung.

Kompatibilitas aplikasi dengan sistem operasi Mac OS maupun Windows, fleksibilitas bahasa pemrograman untuk menulis PHP, JavaScript, HTML, CSS, JSP, XML, dan bahasa pemrograman lainnya.

Bahkan, Dreamweaver juga bisa digunakan untuk mengatur tata letak serta desain template untuk platform WordPress, Drupal dan Joomla, dengan responsifitas pada tiga ukuran layar sekaligus.

Sebagai sebuah aplikasi pembuat website, Adobe Dreamweaver tentu sangat mumpuni untuk menunjang kreativitas web developer.

3. PAGEBREEZE

Berbeda dari aplikasi pembuat website lainnya, PageBreeze lebih menekankan pada kemudahan dan kesederhanaan interface pengguna.

Alhasil, aplikasi ini sangat cocok untuk digunakan bagi para web developer pemula yang baru terjun ke dunia industri.

Selain itu, PageBreeze juga termasuk dalam jajaran editor WYSIWYG, dimana Anda bisa mengedit sekaligus melihat langsung hasil yang sedang dikerjakan.

Fitur-fitur unggulan dari PageBreeze di antaranya meliputi, mode pratinjau, integrasi internal dengan basis data, memiliki ratusan template website gratis, fitur pembuatan form, daftar sumber kode warna, dan masih banyak fitur lainnya.

4. BLUEFISH EDITOR

Bluefish editor adalah aplikasi pembuat website yang menurut kami masih jarang dipakai.

Salah satu penyebabnya yakni Bluefish editor masih kalah pamor dengan editor programming berbasis GUI yang ada dipasaran.

Meski begitu, aplikasi ini memiliki keunggulan dari segi fitur autocomplete syntax, resource yang ringan, serta bisa berjalan cross platform.

5. INVISION STUDIO

InVision Studio merupakan salah satu aplikasi pembuat website dengan banyak fitur untuk menunjang kinerja programmer ataupun web developer.

Aplikasi ini bisa menjadi alat yang bisa mendefinisikan interface menarik dengan tampilan interaktif.

Sahabat Qwords juga bisa memanfaatkan InVision Studio untuk membantu menciptakan fast prototyping, mengkonversi website tradisional menjadi lebih responsif dan modern, hingga bekerja dengan sistem desain untuk menyelaraskan tampilan.

Tools responsif dari InVision Studio bahkan dibekali dengan layout engine yang secara otomatis mampu menyesuaikan tampilan desain website pada layar desktop, tablet, maupun smartphone.

Fitur ini tentu mampu menghemat waktu.

6. COFFEECUP HTML EDITOR

CoffeeCup HTML Editor bisa Anda manfaatkan untuk membuat tampilan blog yang menarik dipandang.

Aplikasi ini sepenuhnya bersifat gratis, namun secara keseluruhan tidak memiliki fitur lengkap guna mengakomodir kebutuhan web developer.

Terlepas dari kekurangan yang ada, CoffeeCup sendiri masih cukup layak untuk digunakan sebagai software untuk membuat website modern dan kekinian.

7. KOMPOZER

Jika Anda merupakan web developer pemula yang tidak ingin ribet mempelajari kode HTML atau bahasa pemrograman lainnya.

Maka KompoZer bisa Anda pilih untuk membantu menciptakan desain website sesuai keinginan.

Secara keseluruhan, cara kerja dari KompoZer yakni membantu merancang tampilan website dengan cara mengkombinasikan antara manajemen file serta fungsi WYSIWYG ketika mengedit halaman.

Beberapa fitur menarik dari KompoZer yang bisa Anda gunakan antara lain meliputi, markup cleaner, resize table, FTP situs manager Tab dan CSS Editor.

APLIKASI UNTUK MENULIS KODE PROGRAM :

- Notepad

- Wordpad

- Notepad ++

- Sublime Text

- Komodo Edit

- Visual Code Studio

1. NOTEPAD 

Notepad merupakan aplikasi yang umum digunakan pada saat pertamakali belajar menulis kode program. Aplikasi yang terintegrasi pada sistem operasi Windows ini merupakan text editor yang sangat populer yang sudah ada sejak Windows 1.0 di tahun 1985.Aplikasi Notepad ada pada semua versi Windows. Bagi yang belum tau cara  masuk ke program aplikasi ini langkahnya cukup mudah, tinggal masuk ke program accessories, pilih Notepad. Atau gunakan pencarian aplikasi dan ketikan nama aplikasi “notepad”.

2. WORDPAD

Selain Notepad, pada sistem operasi Windows juga terdapat aplikasi yang juga bisa digunakan untuk menulis kode program pemrograman dasar seprti HTML dan CSSWordpad sebenarnya merupakan pengolah kata dasar yang disediakan dengan hampir semua versi Microsoft Windows dari Windows 95 dan seterusnya. Aplikasi ini lebih maju dari Notepad tapi lebih sederhana daripada Microsoft Word. Aplikasi ini juga masih satu paket dengan Notepad berada pada paket program aplikasi Accessories pada sistem operasi Windows.

3. NOTEPAD++

Notepad++ merupakan aplikasi text editor gratis ringan yang berjalan pada sistem operasi Windows, kelebihan aplikasi ini disamping ringan yaitu memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code (syntax highlighting). Fitur ini akan memudahkan penulisan HTML.Notpad ++ dikembangkan oleh Don Ho yang diriliskan pada tanggal 24 November 2003,dengan memiliki license dari GNU General Public License dengan ukuran program yang kecil yaitu 5.5MB. Aplikasi ini bisa anda unduh pada alamat situs resminya disini: https://notepad-plus-plus.org/

Apa Itu Notepad++?

Sebagai salah satu aplikasi gratis Windows, Notepad ter-install di banyak komputer orang. Software ini bisa digunakan untuk menulis sebuah program komputer.

Meski begitu, Notepad bukanlah text editor yang terbaik. Ia punya fitur yang terbatas sehingga program yang ditulis di sana kurang maksimal.

Di sinilah Notepad++ hadir. Melansir TechRepublic, ia bisa jadi alternatif dari Notepad.

Mengutip situs resminya, pilihan text editor yang satu ini juga bersifat gratis. Ia bisa digunakan di perangkat dengan OS Windows.

Pengembang dari Notepad++ adalah Don Ho. Ia membuat aplikasi ini karena kurang puas dengan text editor yang ia gunakan di kantornya.

Akhirnya, Ho ingin membangun text editor sendiri. Sayangnya, ide ini tak disetujui oleh kantornya.

Saat itu, Ho tidak menyerah. Text editor impian ia bangun dalam waktu luangnya. Ini merupakan pernyataan Ho yang dikutip oleh Lifehacker.

Akhirnya, pada 25 November 2003 silam, Notepad++ lahir. Software ini ringan, berukuran kecil, namun punya fitur yang lengkap. Ia pun banyak digunakan oleh para programmer.

Notepad++ vs Notepad???

Notepad++ adalah pengganti dari Notepad. Glints sudah menyinggung hal ini di atas.

Nah, sebagai sebuah text editor, apa yang membedakan Notepad dan Notepad++? Apa fitur unik yang ditawarkan oleh aplikasi pengganti ini?

Keunggulan Notepad++ Dalam Software Web Programming :

- Simple, Ringan dan Cepat dibandingkan dengan text editor lainnya, notepad++ tidak perlu menunggu loading opening library, terlebih seperti pada software adobe dreamweaver dan eclipse apa lagi untuk PC / Laptop yang memiliki specification yang rendah.

- Bracket Matching atau bisa dibilang mengumpulkan yang sesuai (berpasangan),biasanya digunakan pada saat menuliskan syntax percabangan,perulangan dan bagian utama program. Fungsi ini berguna untuk kita jika menuliskan block program yang panjang dan terkadang kita lupa untuk menutup block program yang telah kita buat

- Syntax Highlighting tampilan source code,disini kita bisa melihat warna pada setiap fungsi dari syntax. Jadi kita tidak bingung menggolongkan kegunaan syntax yang kita tulis dan dapat dibaca dengan mudah. Contoh tulisan yang berwarna hijau biasanya terdapat pada statment jika kita menuliskan komentar pada sebuah program.

- Syntax Folding atau melipat source code, ini hampir sama seperti bracket matching sebelumnya. Jika bracket matching digunakan untuk menunjukan awal dan akhir suatu block program. Syntax Folding disini tidak jauh beda tetapi, digunakan untuk menyembunyikan block program tertentu agar terlihat lebih ringkas tampilannya agar programmer tidak perlu melihat seluruh syntaxnya apa lagi jika sudah sampai lebih 1000 baris lebih.

- Quick Color Picker++ fungsi ini berguna pada saat kita menuliskan kode warna pada html atau pun CSS tetapi tidak harus menuliskan kodenya terlebih jika kita lupa kode pada warna yang kita inginkan, biasanya akan muncul kotak dengan banyak aneka warna yang kita tinggal pilih,setelah memilih nanti kode warna tersebut akan muncul.

- FingerText, biasa digunakan untuk menuliskan bahasa PHP di notepad++,fungsi ini berfungsi  untuk memudahkan pengetikan syntax dengan kata tertentu sebagai pemicu/trigger dan menggantikannya dengan menekan tombol TAB. Contoh  kata g akan berubah menjadi $_GET.

4. SUBLIME TEXT

Sublime Text adalah teks editor yang mirip seperti Notepad++ namun dengan fitur lebih banyak, aplikasi text editor ini juga menjadi aplikasi text editor yang banyak digunakan selai notepad ++ dan aplikasi text editor lainnya.Tapi sayang, untuk menggunakan aplikasi ini tidak gratis, alias berbayar. Tetapi untuk mencobanya kita bisa menggunakan versi trial dengan batas waktu.

Sublime text merupakan aplikasi text editor yang banyak digunakan oleh seorang web developer. Aplikasi ini merupakan senjata bagi para progammer. Dengan tampilan yang berwarna serta interaktif kita akan nyaman untuk menulis koding kita, selain itu kita bisa merubah temanya. Mari kita mengenal sublime text lebih jauh lagi.

Definisi :

Sublime text merupakan aplikasi text editor yang sangat berguna untuk menulis serta membuka berbgai macam file. Sublime text juga mendukung berbagai bahasa pemrograman seperti HTML, CSS, C, C++, C#, dan lain-lain.

 

Fitur Dari Sublime Text

Package Control dan Themes, Fitur yang berfungsi untuk mengganti tema atau menginstal plugin ini dapat membuat sublime text anda terlihat menarik.

Go To Line, dengan fitur ini kita dapat melompat ke bagian baris kode. Tekan ctrl + P kemudian tulis nomor barisnya, tulis titik dua (:) sebelum menulis kode barisnya.

Multiple Selection, Fitur yang berguna untuk anda yang mempunyai banyak jumlah kata untuk diganti. Dengan fitur ini anda tidak perlu pusing lagi untuk mengganti satu persatu. Double klik teks yang ingin di seleksi kemudian tahan ctrl. Sublime text banyak menawarkan berbagai kemudahan bagi anda, jika anda mengetahui shortcut yang ada di sublime text.

Emmet, untuk yang sedang melakukan koding HTML, dengan fitur ini anda hanya perlu menuliskan sedikit kemudian tekan TAB

 

Keunggulan Sublime Text :

Dengan fitur yang ada pada sublime text, menjadikannya sangat diminati oleh seorang programmer. Ukuran yang ringan juga penulisan syntax secara terstruktur, membuat sublime text sangat bermanfaat. Berikut beberapa keunggulan sublime text :

- Membuat struktur dan elemen HTML/PHP dengan mudah, jika ingin membuat sebuah struktur HTML anda cukup menuliskan “html” kemudian tekan ctrl + spasi maka otomatis akan membentuk kerangka HTML. Begitu juga dengan PHP, cukup tuliskan “php” tekan ctrl + spasi maka kerangka PHP akan terbuat secara otomatis. Untuk PHP eksistensi filenya harus .php

- Membuat comment lebih cepat, jika anda mengerjakan sebuah project bersama, comment merupakan sesuatu yang sangat penting dengan sublime text anda hanya perlu menekan ctrl + / maka sebuah comment akan terbuat. Untuk yang baru belajar anda bisa menggunakan comment, untuk menandai fungsi syntax  anda selama sementara waktu

- Dapat mengubah teks dalam jumlah banyak, sublime dapat mengubah teks dalam jumlah yang banyak dengan mudah dan cepat. Anda tidak perlu memperbaiki satu-persatu kesalahan yang ada, blok semua yang ingin anda ganti kemudian tekan ctrl + D setelah itu anda bisa mengubahnya.

- Memindahkan baris syntax dengan cepat,  dengan menggunakan sublime text anda bisa secara cepat memindahkan baris syntax. Anda tidak perlu lagi copy paste baris syntax lagi. Hal ini akan menghemat waktu anda.

- Menggandakan baris syntax, sublime text dapat menggandakan baris syntax di baris tertuntu dengan cepat. Klik syntax yang ingin digandakan kemudian tekan Ctrl + Shift + D.

5. KOMODO EDIT

Salah satu aplikasi text editor untuk menulis kode pemrograman dan bisa menjadi alternatif aplikasi editor pada saat belajar pemrograman web dasar adalah Komodo Edit. Komodo Edit juga merupakan versi ringan dari versi berbayar Komodo IDE yang juga dikembangkan oleh perusahaan yang sama yaitu ActiveState.Aplikasi editor Komodo Edit ini gratis, berbeda dengan Sublime, aplikasi ini bisa anda unduh secara cuma-cuma pada situs resminya disni: https://www.activestate.com/komodo-edit

Selain 5 aplikasi text editor diatas, masih ada banyak lagi aplikasi dengan fungsi serupa dan fitur yang variatif seperti Adobe Dreamweaver, Atom, Brackets, Visual Studio Code, dan lainnya. Tapi sejauh ini, untuk belajar pemrograman web dasar Notepad ++ menjadi aplikasi unggulan dibanding aplikasi text editor lainnya.

Komodo Edit adalah mitra open source dari Komodo IDE. Keduanya berbagi banyak basis kode yang sama, tetapi Komodo IDE berisi fitur yang lebih canggih. Baik Komodo Edit dan IDE mendukung kustomisasi pengguna melalui plugin dan makro. Plugin Komodo didasarkan pada plugin Mozilla dan ekstensi dapat dicari, diunduh, dikonfigurasi, diinstal dan diperbarui dari dalam aplikasi.

Di antara fitur-fitur Komodo Edit, kita dapat menemukan:

- Program ini tersedia untuk Gnu / Linux, Mac dan Windows.

- Komodo Edit adalah editor kode yang luar biasa serupa (tidak sama) dengan Notepad ++.

- Kita bisa menggunakan aplikasi ini untuk memprogram menggunakan bahasa yang berbeda seperti; PHP, CSS, Ruby, HTML, SQL, XML dan banyak lagi.

- Editor ini mendukung pelengkapan kode otomatis dan penyorotan sintaksis.

6. VISUAL CODE STUDIO 

Visual Code Studio adalah sebuah code editor gratis yang bisa dijalankan di perangkat desktop berbasis Windows, Linux, dan MacOS. Code editor ini dikembangkan oleh salah satu raksasa teknologi dunia, Microsoft.

Visual Code adalah software editor yang powerful, tapi tetap ringan ketika digunakan. Ia bisa dipakai untuk membuat dan mengedit source code berbagai bahasa pemrograman. Misalnya, seperti JavaScript, TypeScript, dan Node.js.

Bahkan, Visual Code Studio juga kompatibel dengan bahasa dan runtime environment lain, seperti PHP, Python, Java, dan .NET. Hal ini berkat ekosistemnya yang luas dan ketersediaan extension yang melimpah.

Maka tidak heran, jika Visual Code adalah code editor terpopuler saat ini. Hal ini terbukti dari survey Stack Overflow, di mana software yang satu ini menduduki peringkat teratas dengan persentase pengguna 71.06%.

Fitur-Fitur Visual Code Studio :

1. Basic Editing

2. IntelliSense

3. Debugging

4. Extension Marketplace

5. Github Integration

BASIC EDITING

Sesuai fungsinya sebagai code editor, kemampuan Visual Code Studio untuk coding tidak perlu diragukan lagi. Ia punya semua yang Anda butuhkan. Mulai dari Keyboard Shortcuts, Multiple Selection, hingga Column Selection.Bahkan, Visual Code juga menambahkan fitur Auto Save dan Hot Exit. Keduanya berfungsi untuk menyimpan file secara otomatis. Hal ini berguna untuk mencegah hal-hal yang tidak diinginkan, seperti lupa menyimpan file.

INTELLISENSE

IntelliSense adalah fitur Visual Studio yang dapat memudahkan proses coding. Cara kerjanya mirip dengan Autocomplete, yakni menyarankan keseluruhan kata berdasarkan apa yang Anda ketik.Nah, IntelliSense tersedia secara default untuk JavaScript, TypeScript, JSON, HTML, dan CSS. Namun jangan khawatir, Anda dapat menambahkan IntelliSense untuk bahasa pemrograman lain lewat Extension Marketplace

DEBUGGING

Fitur kunci lainnya di Visual Code adalah Debugging. Fitur ini berguna untuk memudahkan Anda dalam mengedit, meng-compile, dan mengeksekusi kode berulang kali (looping).Secara default, Visual Studio menyediakan fitur Debugging untuk Node.js. Namun, Debugging untuk bahasa pemrograman lain tetap dapat Anda unduh melalui Extension Marketplace.

EXTENSION MARKETPLACE

Extension Marketplace adalah fitur yang membuat Visual Code Studio unggul jauh dari para pesaingnya. Dengan Extension, Anda bisa dengan mudah menginstall tools, debuggers, bahkan bahasa pemrograman tambahan.Dengan begitu, proses pengembangan aplikasi jadi lebih cepat. Menariknya lagi, Visual Code memungkinkan para pembuat Extension berkontribusi secara fungsional, guna menghindari masalah kompatibilitas.

GITHUB INTEGRATION

Fitur unggulan lain dari Visual Code adalah integrasi Github, platform manajemen project terpopuler di dunia. Di sini, Anda dapat berbagi code dan berkolaborasi dengan rekan kerja, tanpa perlu berpindah software.Cara menggunakannya juga sangat mudah. Anda hanya perlu menyiapkan akun Github, kemudian menginstall Github Pull Request and Issues melalui Extension Marketplace.

Kelebihan Visual Code Studio :

Setelah mengenal fitur-fitur Visual Code Studio, mari mengenal kelebihan memakai Visual Studio Code untuk coding:

Tersedia di Banyak Platform – Visual Code dapat diinstall di platform Linux, MacOS, dan Windows. Jadi, tidak ada lagi kendala dukungan terhadap perangkat yang Anda gunakan.

Fitur yang Lengkap – Seperti yang sudah dijelaskan, kelengkapan fitur menjadi keunggulan utama Visual Studio. Hal ini berkat adanya Extension Marketplace, sehingga Anda bisa menambah fitur-fiturnya dengan bebas.

Performa Secepat Kilat – Meski dijejali banyak Extension, performa Visual Code Studio tetap tangguh. Sebab, Extension yang tersedia telah dioptimasi sedemikian rupa, sehingga tidak mempengaruhi kinerja code editor ini.

Dukungan Arsitektur Terbaik – Visual Studio menggunakan berbagai teknologi terbaik di dalamnya. Seperti Electron untuk pengembangan JavaScript dan Node.js, Monaco Cloud Editor untuk HTML, Roslyn untuk .NET, dan sebagainya.

Diskusi Kelompok :

Menurut anda , manakah “teks editor” terbaik untuk menulis kode program?

Jelaskan alasannya !