Modul HTML #1 : Pengantar Bahasa Pemrograman Web

Saat ini terminologi website sudah menjadi ungkapan sehari-hari dan sudah tidak asing lagi bagi seluruh kalangan, terutama dikalangan dunia pendidikan. Sebuah survey menyimpulkan bahwa 80% informasi yang terdapat di internet disebarkan melalui layanan website ini. Oleh karena itu, kebutuhan terhadap orang-orang yang mampu membangun/membuat website akan sangat tinggi dimasa mendatang.

Dahulu, website murni digunakan sebagai media untuk menyampaikan informasi, namun sekarang kehadiran website tidak saja sebagai media untuk menyebarkan informasi namun juga sebagai media untuk berkomunikasi, berbisnis, hiburan, belajar dan sebagainya. Sehingga kebanyakan aktifitas manusia sudah mulai terpenuhi melalui layanan-layanan yang disediakan oleh website.

Aplikasi internet berbasis website yang dapat dinikmati, antara lain :

  • E-banking, melalui website transaksi keuangan dapat dilakukan dimana saja, kapan saja tanpa mesti datang ke kantor
  • E-Goverment, melalui website layanan dan fungsi pemerintah dapat dilaksanakan dengan
  • E-Commerce/e-business, melalui website sekarang bisa berbisnis online, sehingga sekarang banyak toko-toko online yang pangsa pasarnya mendunia.
  • E-social, melalui website kebutuhan kita sebagai makluk sosial dapat terpenuhi, hal ini terbukti dengan munculnya aplikasi social media berbasis website.
  • E-Learning, melalui website proses belajar mengajar dapat dilakukan tanpa harus hadir di ruang kelas, bahkan fasilitasnya lebih canggih.
  • E-News, penyebaran informasi di segala penjuru dunia sekarang dapat diperoleh melalui website berita/portal.

1.1 Mengenal Website

Website adalah keseluruhan halaman-halaman web yang terdapat dari sebuah domain yang mengandung informasi. Sebuah website biasanya dibangun atas banyak halaman web yang saling berhubungan. Hubungan antara satu halaman web dengan halaman web yang lainnya, atau antar bagian dalam halaman web yang sama disebut dengan Hyperlink sedangkan teks yang dijadikan media penghubung disebut Hypertext. Sebuah website dapat diakses melalui browser, yaitu perangkat lunak untuk mengakses halaman-halaman web, seperti Internet explorer, mozilla firefox, opera, safari, chrome dan lain-lain.

Website dapat berjalan di internet seperti saat sekarang ini tidak lain adalah berkat penemuan teknologi yang disebut HTML oleh Tim Barners Lee pada tahun 1989. Tim Barners Lee adalah salah seorang staff ahli dari CERN (Conseil Europeen pour la Recherche Nucleaire), sebuah organisasi penelitian yang berlokasi di Jenewa, Swiss. HTML adalah singkatan dari HyperText Markup Language yang merupakan suatu bahasa semi pemrograman yang menjadi dasar terwujudnya website.

 

1.2 Istilah Penting Seputar Website

Berikut ini beberapa istilah yang berhubungan dengan website :

  • www adalah metode untuk menampilkan informasi di internet yanag dapat diakses melalui sebuah
  • Halaman web (web page) adalah sekelompok informasi yang tampil pada browser, informasi tersebut ditampilkan berdasarkan sebuah URL (Uniform Resource Locator).
  • URL adalah alamat lengkap dari sebuah informasi yang dapat diakses melalui browser, misalnya http://www.agussuratna.net/images/logo.jpg
  • http adalah protocol untuk layanan hypermedia, komunikasi antara browser dengan web
  • www melambangkan layanan web,
  • net adalah nama domain,
  • images adalah nama folder,
  • jpg adalah nama sebuah file dengan extenxi .JPG.
  • Situs Web (Website) adalah kumpulan dari keseluruhan halaman web yang terdapat pada sebuah domain, yang terdiri dari dua atau lebih halaman
  • Homepage adalah halaman web pertama dari sebuah website yang diakses berdasarkan domainnya. Misalnya kita mengakses web dengan alamat agussuratna.net. maka halaman yang tampil pertama kali disebut homepage, namun jika kita telah mengklik link-link yang lain pada halaman tersebut, maka yang kita buka adalah halaman webnya.
  • Domain adalah nama unik yang dimiliki oleh setiap website untuk memudahkan orang dalam mengingat nama sebuat website, misalnya agussuratna.net, detik.com, upi.edu, itb.ac.id dan lain-lain.

 

1.3 Teknologi Website

Perkembangan teknologi dibidang website terus diexplore hingga saat ini telah mulai memasuki teknologi yang disebut dengan web 4.0. Pada tahun 1994 dibentuklah W3C (World Wide Web Consorsium) sebagai otoritas tunggal bagi pengembangan web serta berwenang menetapkan stkitar yang berlaku di dalamnya. Perkembangan teknologi website hingga saat ini :

  1. Web 1.0 (periode 1989 – 2000 )

Ciri utama dari website periode ini adalah masih bersifat statis dan dibutuhkan pemahaman terhadap bahasa pemrograman web untuk dapat menambah ataupun memperbaharui konten. Namun, tujuan utamanya dalam menyampaikan informasi tercapai.

Masih murni menggunakan kode-kode HTML, sehingga pengunjung hanya bisa mendapatkan informasi (browsing and read) saja, melakukan pencarian dan belum ada interaksi antara pemilik website dengan pengunjung.

  1. Web 2.0 (Periode 2001 – 2010)

Istilah teknologi web 2.0 pertama kali dicetuskan oleh O’Reilly pada tahun 2003 dan kemudian dipopulerkan dalam konferensi Web 2.0 pertama di tahun 2004. Pada teknologi Web 2.0 ini keberadaan pengunjung tidak saja sekedar membaca informasi dari website, namun dapat berkolaborasi dan berbagi konten dalam website tersebut sehingga tidak hanya programer saja yang dapat mengupdate website. Hal ini terlihat dari website jejaring sosial, blog, file sharing, photo sharing, video sharing dan lainnya.

Tidak itu saja, dengan dukungan teknologi seperti ajax atau plug in lainnya, maka website dapat menjalankan aplikasi layaknya aplikasi di desktop seperti drag & drop, voice chat, bahkan mirip sistem operasi dimana kita dapat mengolah data spreadsheet, presentasi dan aplikasi pengolah kata, seperti layanan google docs.

  1. Web 3.0 (Periode 2011 – 2018)

Konsep dari teknologi Web 3.0 ini sebenarnya telah diperkenalkan oleh Tim Barness Lee pada tahun 2001, ia menulis sebuah artikel ilmiah yang menggambarkan Web 3.0 sebagai sebuah sarana bagi mesin untuk membaca halaman-halaman Web. Hal ini berarti bahwa mesin akan memiliki kemampuan membaca Web sama seperti yang manusia dapat lakukan sekarang ini.

Web 3.0 berhubungan dengan konsep Web Semantik, yang memungkinkan isi web dinikmati tidak hanya dalam bahasa asli pengguna, tapi juga dalam bentuk format yang bisa diakses oleh agen-agen software. Oleh karena itu Web 3.0 juga disebut sebagai Web Semantik.

Penekanan lainnya dari Web 3.0 adalah dalam bidang pencarian data, akan digunakan konsep, dimana manusia dapat berkomunikasi dengan mesin pencari. Pengguna dapat meminta Web untuk mencari suatu data spesifik tanpa harus bersusah-susah mencari satu per satu dalam situs-situs Web. Web 3.0 juga dapat menyediakan keterangan-keterangan yang relevan tentang informasi yang ingin kita cari, bahkan tanpa kita minta.

  1. Web 4.0 (Periode 2018 – sekarang)

Sejak 1989, Internet telah berkembang dari situs hanya-baca menjadi web semantik 3.0 saat ini. Web pada akhirnya akan berubah menjadi Web yang terhubung dengan cerdas. Web 4.0 menyediakan koneksi antara manusia dan mesin untuk membuat data interaktif untuk internet simbiosis baru.

Konektivitas permanen di Web 4.0 akan berdampak besar pada kehidupan sehari-hari. Penggunaan teknik baru dalam aktivitas sehari-hari akan menghasilkan simbiosis antara manusia dan mesin. Data besar akan semakin banyak digunakan dalam realitas virtual. Pengenalan tag RFID tidak hanya akan mengaktifkan koneksi antara manusia dan mesin, tetapi juga koneksi antar mesin. Perangkat dan aplikasi ini akan merasakan kebutuhan penggunanya berkat AI.

Baca Juga  Tutorial CSS : #3 Selector, Property dan Value Pada CSS

Web 4.0 adalah private secretary dalam bentuk organisme buatan. Sebuah alat dimana aplikasi merekam rutinitas yang kita lakukan yang seluruh rutinitas tersebut bisa diketahui oleh aplikasi komputer/program/tools/device yang kita miliki yang dijalankan secara online. Web 4.0 juga bisa digunakan untuk membantu dalam pencarian informasi, penyimpanan histori pencarian, ataupun mempertemukan orang orang yang mencari informasi sama.

Apapun bentuk rutinitasnya , seluruh rutinitas tersebut bisa diketahui oleh aplikasi komputer/program/tools/device yang kita miliki yang dijalankan secara online. Jadi kemanapun seseorang pergi dan apapun yang dilakukan semuanya direcord oleh alat-alat tersebut yang nantinya akan digunakan jika ingin mengetahui informasi apa yang dibutuhkan, bahkan teknologi ini bisa mengingatkan, menginterupsi dan memberikan informasi manakala ada perubahan dari sebuah sechedule/rutinitas, membantu melakukan pencarian.

Inti dari Web 4.0. dapat mengetahui apa saja yang kita lakukan, dan dia juga bisa membantu dalam melakukan pencarian informasi, menyimpan histori pencarian, bahkan mempertemukan orang-orang yang mencari informasi yang sama.

Menurut Seth Godin dalam blognya, syarat utama teknologi Web 4.0 :

    1. Ubiquity
      Syarat ini dibutuhkan karena domain dari teknologi Web 4.0 adalah aktivitas bukan hanya sekedar data, dan sebagian besar aktivitas manusia berjalan offline.
    2. Identity
      Karena distribusi informasi spesifik ditujukan dan didedikasikan untuk seseorang/pribadi sehingga diperlukan informasi mengenai identitas pribadi yang bersangkutan, rutinitasnya dan apa yang dibutuhkan oleh pribadi tersebut.
    3. Connection
      Tanpa relasi/hubungan seseorang tidak ada artinya dalam teknologi Web 4.0 karena teknologi ini dikembangkan untuk kepentingan ini (making connection).

 

1.4 Jenis-Jenis Website

Seiring dengan perkembangan teknologi informasi yang begitu cepat, website juga mengalami perkembangan yang sangat berarti. Dalam pengelompokkan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat dan bahasa pemrograman yang digunakan.

Jenis-jenis web berdasarkan sifatnya :

  • Website Dinamis, merupakan sebuah website yang menyediakan konten atau isi yang selalu berubah-ubah setiap saat. Misalnya website berita, seperti, kompas.com, www.detik.com, www.agussuratna.net dan lain-lain.
  • Website statis, merupakan website yang kontennya sangat jarang diubah dan untuk mengubahnya memerlukan pengetahuan

Berdasarkan pada tujuannya, website terbagi atas :

  • Personal web, website yang berisi informasi pribadi seseorang,
  • Corporate web, website yang dimiliki oleh sebuah perusahaan,
  • Portal web, website yang mempunyai banyak layanan, mulai dari layanan berita, email dan jasa-jasa
  • Forum web, sebuah web yang bertujuan sebagai media untuk
  • website e-Government, e-Banking, e- Payment, e-Procurement dan lain

Ditinjau dari segi bahasa pemrograman yang digunakan, website terbagi atas :

  • Server Side, merupakan website yang menggunakan bahasa pemrogram yang tergantung kepada kepada sebuah server untuk menterjemahkan kode-kode pemrograman web, seperti : PHP, ASP dan lain sebagainya. Jika tidak ada server, maka website yang dibangun menggunakan bahasa pemrograman di atas tidak akan dapat berfungsi sebagaimana
  • Client Side, adalah website yang langsung dapat dieksekusi dari sisi client saja (tidak tergantung kepada server), misalnya : html,

Disamping jenis-jenis di atas, sekarang pengelolaan website dinamis yang bersifat server side dapat berupa webiste Konten Management System (CMS), yaitu sebuah website yang mempunyai pengelolaan kontennya lebih terstruktur sehingga memudahkan dalam pengelolaannya.

 

1.5 Mengenal Website CMS

Website Conten Management System atau disingkat WCMS adalah suatu metoda dalam mengelola sebuah kontent/isi dari website. Konten dapat berupa teks, suara, gambar video, animasi dan aplikasi lainnya yang disimpan dalam sebuah database sehingga mudah dalam pengelolaannya, baik bagi orang yang mengerti tentang teknologi web maupun yang tidak.

Berdasarkan pada fungsinya, WCMS dapat dibagi atas :

  • WCMS Portal, adalah sebuah website CMS yang mempunyai banyak layanan, seperti layanan berita, forum, mailing list, e-mail dan lain sebagainya. Misalnya : CMS Joomla, CMS Drupal, CMS WordPress, dan lainnya.
  • WCMS E-Commerce, adalah sebuah website CMS yang bertujuan agar dapat melakukan proses transaksi online. Misalnya : CMS OsCommerce, CMS PrestaShop, CMS Magento dan lain-lain.
  • WCMS E-Learning, adalah website CMS yang bertujuan untuk keperluan proses belajar mengajar jarak jauh. Misalnya : CMS aTutor, CMS Moodle dan lain
  • WCMS Forum, adalah website CMS yang menyediakan media untuk proses diskusi secara online, misalnya : CMS phpBB, CMS MyBB dan lain
  • WCMS Gallery, adalah website CMS yang menyediakan wadah untuk menampilkan gallery Misalnya : CMS Galery, CSM Copermine dan lain sebagainya.

Disamping penggolongan diatas, WCMS juga dapat dikelompokkan berdasarkan kepada sifatnya, yaitu :

  • WCMS Komersial, adalah WCMS yang berbayar, artinya harus membayar sejumlah harga tertentu untuk dapat menggunakannya serta untuk mendapatkan source code
  • WCMS Open Source, ini merupakan jenis WCMS yang paling banyak beredar di internet, karena bersifat open source (bebas untuk di unduh, digunakan dan disebarluaskan) dan berlisensi GPL.

1.6 Manfaat Website

Website mempunyai banyak manfaat, karena kemampuannya dalam menyampaikan informasi dalam berbagai cara, kemampuannya dalam berinteraksi dan kemampuannya dalam menjalankan layanan-layanan tertentu, seperti aplikasi bisnis, aplikasi perbankan, aplikasi pembelajaran online dan seterusnya,

Secara umum manfaat dari website adalah :

  • Media untuk memperkenalkan diri atau mempromosikan institusi/lembaga, tentunya dengan menyediakan informasi yang akurat dan jelas pada website.
  • Media untuk berkomunikasi, antara perusahaan dengan clientnya, antara pengelola sekolah dengan siswanya, antara pemerintah dengan warganya, atau media komunikasi untuk stake holder yang terkait dengan website tersebut dan masyarakat umum.
  • Media untuk berbagi
  • Media untuk belajar dan
  • Media untuk berbisni dan sebaginya.

1.7 Text Editor

Text editor adalah suatu software yang memungkinkan seseorang untuk membuka, melihat, dan mengedit file plain text atau teks biasa. Tak seperti software pengolah kata seperti Microsoft Word, text editor tak memiliki fungsi untuk memformat dan hanya fokus pada mengolah teks biasa.

Software ini sangat berguna bagi programmer atau developer untuk membaca bahasa pemrograman. Tidak hanya membaca saja, text editor juga memudahkan penggunanya untuk menulis kode.

Untuk pengguna system operasi Windows, mungkin sudah tidak asing lagi dengan software yang bernama Notepad, software tersebut merupakan salah satu contoh dari text editor.

Seperti yang sudah disebutkan sebelumnya, programmer membutuhkan text editor untuk menyusun sebuah aplikasi. Sebab, membaca bahasa pemrograman secara manual cukup memakan waktu yang lama. Untuk itu, text editor membantu programmer untuk menyelesaikan pekerjaannya secara efektif.

Secara umum, text editor menyajikan beragam fitur, mulai yang sederhana sampai yang lengkap dengan berbagai tambahan plugin yang tersedia. Jadi, dalam penggunaannya seseorang akan memilih text editor sesuai dengan kebutuhannya.

Pada dasarnya, fungsi text editor hanyalah sebagai tempat menuliskan kode program tanpa ada compiler. Itulah sebabnya, text editor digunakan untuk menuliskan kode program bahasa pemrograman dalam membuat website, seperti HTML, CSS, Javascript, PHP, dan lain-lain.

Fitur Umum dalam Text Editor

  1. Operasi file

Dilansir dari Texas A&M University, semua text editor mempunya fitur untuk menyimpan dan membuka file yang tersedia. Sama halnya seperti Microsoft Word, fitur ini terletak di bagian kiri atas. Nantinya, saat pengguna mengklik bagian “File” maka akan muncul beragam pilihan, mulai dari menyimpan, membuka file baru, dan lain-lain.

  1. Cut, copy and paste

Masih sama seperti aplikasi pengolah kata, text editor juga dilengkapi fitur cut and paste yang membuat programmer jadi semakin mudah dalam penggunaannya. Cara penggunaannya pun sama, pengguna tinggal mengklik teks yang ingin disalin, lalu CTRL+C dan tempel di text editor dengan menekan CTRL+V. Selain itu, pengguna juga bisa melakukannya dengan dragging, yaitu menyeret file yang ada dengan menekan tombol klik di bagian kiri pada mouse.

  1. Customization

Fitur lainnya dari text editor adalah pengguna dapat melakukan customize atau penyesuaian sehingga nyaman untuk digunakan, contohnya mengubah skema warna, teks, dan ukuran font yang sesuai dengan pengguna.

  1. Find and replace
Baca Juga  Cara Mudah Membuat Editor WYSIWYG Menggunakan TinyMCE

Text editor juga menyediakan fitur yang memudahkan penggunanya untuk mencari dan mengganti kata dengan hanya satu klik saja. Sama seperti aplikasi pengolah kata tinggal menekan CTRL+F, lalu tulis kata yang ingin diubah dan langsung diarahkan ke kata yang dituju.

  1. Extensibility

Fitur ini terbilang sangat memanjakan bagi para programmer atau siapapun yang menggunakan text editor. Dimana fitur ini menyediakan beberapa mekanisme plugin sehingga programmer dapat menyesuaikan editor dengan fitur tambahan tersebut.

 

Macam-macam Text Editor

Ada berbagai macam text editor yang populer saat ini. Diantaranya mempunyai kelebihan fitur yang lengkap, ringan, atau dukungan dengan berbagai bahasa pemrograman maupun integrasi dengan program lain.

Berikut adalah beberapa text editor yang bisa kita gunakan :

  1. Notepad++

Notepad merupakan text editor bawaan Windows yang sering dimanfaatkan untuk membuat file txt atau mengetik catatan ringan. Sedangkan Notepad++ merupakan pengembangan dari Notepad bawaan Windows.

Notepad++ menyediakan fitur tambahan yang lebih modern dan canggih. Notepad hanya menggunakan tampilan menu yang simpel dengan latar putih, sedangkan di Notepad++ terdapat banyak pilihan menu dan ikon.

Pengguna bisa melakukan banyak hal menggunakan Notepad++. Aplikasi ini bisa membaca berbagai macam bahasa pemrograman. Tersedia juga menu plugin untuk menambah fitur.

Notepad++ menggunakan tampilan jendela tab, fitur ini akan sangat berguna ketika  membuka beberapa file dalam satu waktu. Terdapat juga tampilan susunan file yang sedang dibuka sehingga memberikan informasi posisi file di dalam folder kerja.

Selain fitur-fitur di atas, fitur lain yang cukup bermanfaat adalah shortcut customization, text-shortening, macro recording, auto-completion, dan masih banyak lagi.

Bagi yang membutuhkan text editor yang ringan dengan kebutuhan yang terbatas, Notepad++ merupakan pilihan tepat, selain itu aplikasi dapat digunakan secara gratis. Kita bisa langsung akses ke website untuk mencobanya langsung di alamat https://notepad-plus-plus.org/downloads/.

 

  1. Sublime Text

Salah satu keunggulan dari Sublime Text memang tampilannya yang dinamis. Tersedia juga beberapa tema yang dapat dipilih sesuai dengan selera. Sublime Text termasuk di dalam text editor yang mendukung berbagai macam sistem operasi seperti Windows, Mac, dan Linux. Jadi tidak masalah jika mengerjakan pengembangan aplikasi menggunakan beberapa sistem operasi yang berbeda-beda. Linux merupakan sistem operasi yang paling kompatibel dengan Sublime Text, performanya lebih maksimal di sistem operasi ini. Keunggulan lain dari Sublime Text adalah cepat dan dapat digunakan bahkan di perangkat dengan resource yang kecil. Sublime Text juga memungkinkan pengguna untuk menambah fitur dengan menginstall plugin. Sublime Text dapat  gunakan secara gratis dengan batasan waktu, Sublime Text juga menyediakan fitur premium yang hanya bisa digunakan jika melakukan pembayaran, biayanya sekitar 70 US Dollar untuk mendapatkan lisensi penuh. Untuk bisa mengunakannya bisa langsung kunjungi website Sublime Text untuk mendapatkan file instalasinya di alamat http://www.sublimetext.com/.

 

  1. Visual Studio Code

Selain Notepad, text editor lain yang digarap oleh Windows adalah Visual Studio Code atau biasa disingkat menjadi VSCode. Tampilan Visual Studio Code cukup menarik dengan beberapa ornamen yang khas di sana. Visual Code merupakan text editor yang gratis dan powerful. Visual Code ini menyediakan fitur yang dapat melengkapi baris kode yang pengguna tulis secara otomatis. Selain itu, ada banyak sekali fitur tambahan yang dapat membuat pengguna nyaman untuk menggunakannya.

Pengguna dapat menyembunyikan menu dan ikon dengan menggunakan mode Zen. Mode ini mendukung penggun untuk tetap fokus pada aplikasi yang sedang dikembangkan. Untuk menavigasi antara fitur satu dengan yang lain, bisa memanfaatkan keyboard shortcut yang juga tersedia lengkap di Visual Code. Terdapat juga fitur integrasi dengan Git dan fitur debugging yang dapat membantu pengguna untuk mengecek kesalahan pada baris kode.

Pada awalnya lebih mendukung ke penggunaan bahasa pemrograman C#, Visual Code Studio bisa juga digunakan untuk bahasa pemrograman lainnya. Untuk mencobanya, tersedia versi gratis maupun berbayar, kita bisa langsung mengunjungi halaman Visual Code Studio untuk mendapatkan file instalasinya di alamat https://code.visualstudio.com/ .

 

  1. Komodo Edit

Selain Sublime Text, ada aplikasi lain yang cukup mirip, yaitu Komodo Edit. Keduanya memiliki fitur-fitur yang cukup lengkap dan juga bisa dipakai di berbagai macam sistem operasi seperti Windows, Linux, dan Mac OS. Komodo Edit sudah berdiri cukup lama, aplikasi ini resmi diperkenalkan pada tahun 2007 yang saat itu untuk melengkapi IDE berbayar Komodo ActiveState.

Komodo Edit ini mendukung juga bahasa pemrograman tingkat tinggi seperti HTML, SQL, CSS, Python, PHP, Ruby, dan lain sebagainya. Untuk mencobanya kita bisa akses ke halaman GitHub Komodo Edit untuk mencoba text editor ini di sistem operasi yang kita gunakan pada alamat https://github.com/Komodo/KomodoEdit.

 

  1. Atom

Atom merupakan text editor terbaik open source yang ada saat ini. Aplikasi ini tersedia untuk Mac OS, Linux, dan Windows. Atom ini tidak kalah elegan dengan Sublime Text. Selain tampilannya menarik dan desain yang elegan, aplikasi ini juga mendukung banyak bahasa.

Jika menginginkan fitur tambahan, kita dapat dengan mudah menambahkannya melalui menu plugin yang tersedia. Fitur-fitur yang tersedia di dalam Atom antara lain teknologi web based, fuzzy finder, fast project-wide, file system browser, TextMate grammars, integrasi dengan Node.js, dan masih banyak keunggulan lain Atom dibandingkan dengan text editor lain. Karena banyaknya fitur yang ditawarkan editor ini, kita perlu menyiapkan resource yang cukup besar dibandingkan dengan text editor lain. Untuk menginstall Atom kita dapat mengunjungi halaman Atom untuk mengunduhnya, pada alamat https://atom.io/.

 

  1. BlueFish

BlueFish merupakan text editor multi-platform yang juga dapat Anda gunakan di berbagai sistem operasi seperti Windows, Mac OS, dan Linux. Walaupun begitu aplikasi ini lebih optimal di sistem operasi Linux.  Meskipun sangat ringan, Bluefish bisa digunakan untuk menangani ukuran file yang cukup besar secara berkala dan bisa menjaga kecepatan pemrosesannya tetap stabil.

Pengguna juga dapat memanfaatkan berbagai macam fitur yang tersedia dalam toolbar maupun tab menu, seperti pencarian, format baris kode, dan penambahan tabel. Terdapat juga fitur snippet yang bisa menambah produktivitas. Untuk menginstall Atom kita dapat mengunjungi halaman BlueFish untuk mengunduhnya, pada alamat http://bluefish.openoffice.nl/ .

 

  1. Vim

Aplikasi ini dikenalkan pada  1991 dan menjadi salah satu text editor terbaik sampai saat ini. Untuk pengguna Linux pasti tidak asing dengan aplikasi ini, Vim merupakan text editor bawaan Linux yang sering bermanfaat untuk membuka dan mengedit baris kode di dalam file. Tampilan Vim yang sangat sederhana (menggunakan CLI ‘Command Line Interface’) memang cukup memusingkan bagi pengguna baru, namun untuk kecepatan, tidak perlu dipertanyakan lagi.

Baca Juga  Tutorial Javascript #1 : Pengenalan Javascript

Vim menjadi satu di antara beberapa editor terbaik yang sangat ringan. Aplikasi ini dapat Anda gunakan secara gratis dengan berbagai macam fitur. Vim mendukung banyak bahasa pemrograman, seperti bash script, C, dan PHP. Vim juga mempunyai catatan riwayat edit yang dapat membantu untuk kembali ke awal ketika terjadi kesalahan.

Pengguna bisa mengecek ada atau belumnya Vim di perangkat menggunakan perintah “vim” di CLI (Terminal atau CMD). Jika di perangkat belum terinstall, kita bisa langsung mengunduh file instalasi di halaman Vim pada halaman https://www.vim.org/download.php .

 

  1. Emacs

Emacs merupakan text editor yang cukup populer bagi pengguna Linux di seluruh seluruh dunia. Aplikasi ini pertama kali dikembangkan pada 1976 oleh GNU Project yang didirikan Richard Stallman. Emacs ditulis dengan menggunakan Lisp dan bahasa pemrograman C. Meskipun dengan keterbatasan ini, Emacs mempunyai fitur yang cukup banyak seperti tampilan debugger, email, dan berita. Uniknya di dalam aplikasi ini terdapat file manager yang dapat digunakan untuk bermain tetris. Selain itu, Emacs juga mendukung Subversion, bzr, git, hg, dan lainnya. Kita bisa langsung mengunjungi halaman Emacs untuk mengunduh file instalasinya pada alamat https://www.gnu.org/s/emacs/ .

 

  1. Geany

Jika Windows mempunyai Notepad++, Linux mempunyai Geany. Ini adalah text editor alternatif yang dimiliki oleh Linux. Geany merupakan text editor yang ringan, sama halnya dengan Notepad++. Geany hanya membutuhkan library GTK+ runtime untuk bisa dijalankan. Meskipun ringan, ada beberapa fitur Geany yang bisa penguna manfaatkan, beberapa diantaranya adalah syntax highlighting, code folding, autocompletion programming, code navigation, dan masih banyak lainnya. Selain itu, aplikasi ini juga mendukung berbagai macam bahasa pemrograman seperti C, Java, PHP, HTML, Python, dan lainnya.

 

  1. Brackets

Brackets menjadi text editor terbaik yang dikhususkan untuk desainer web. Salah satu keunggulan dari Brackets adalah tampilannya yang bersih dan modern, selain itu Brackets juga mendukung berbagai macam sistem operasi seperti Mac OS, Windows, dan Linux. Aplikasi ini juga mempunyai beberapa fitur menarik seperti highlighting, berbagai macam keyboards shortcut, dan mode no-distraction.

Tersedia juga split screen untuk mengedit beberapa dokumen dalam satu waktu. Live Preview juga merupakan fitur unggulan dari Brackets, pengguna dapat melihat secara langsung hasil CSS/HTML terbaru menggunakan web browser default. Area ‘working file’ dapat membuka semua file di dalam satu single project. Penggunapun bisa mengganti tampilan Brackets dari mode gelap ke terang, dan sebaliknya atau  bisa mendapatkan tema tambahan dari extension manager.

Untuk text editor yang akan dipakai pada pelajaran Pemrograman Web dan Perangkat Bergerak akan menggunakan Visual Studio Code, jika ada yang menggunakan selain itu dipersilahkan juga.

 

 

PRAKTIKUM MODUL 1

Pada praktikum awal ini, Peserta Didik akan diajarkan cara menginstall dan memulai pembuatan script-script website menggunakan text editor Visual Studio Code.

Cara install Visual Studio Code :

  1. Pertama kita harus download terlebih dahulu file instaler Visual Studio Code melalui situs resminya https://code.visualstudio.com/
  2. Setelah berhasil di download, lanjut ke proses instalasi. Double klik pada file installernya atau klik kanan kemudian pilih Run as Administrator
  3. Jika muncul peringatan Run as Administrator, silahkan klik Yes
  4. Pilih “I accept the aggrement” untuk menyetujui “License Agreement”, kemudian klik Next
  5. Untuk Select Destination Location bisa di biarkan saja jika lokasi instalasi tidak akan dirubah. Klik Next
  6. Klik Next lagi jika tidak akan merubah Start Menu Folder
  7. Di bagian Select Additional Tasks centang semua. Kemudian Next
  8. Lalu klik Install untuk memulai proses instalasi
  9. Tunggu sampai proses instalasi selesai
  10. Setelah selesai klik Finish

 

Install Extensions

  1. Setelah proses instalasi berhasil, selanjutnya install Extensions di Visual Studio Code. Ada banyak extensions yang bisa kita install, ada extension C/C++, Phyton, Live Server dan sebagainya. Pada contoh ini coba install Extensions Python.
  2. Buka Visual Studio Code, klik tab Extensions yang ada di sebelah kiri (1), kemudian ketik “Python” di pencarian (2), pilih Python (3). Kemudian klik Install pada Extensions : Python (4).

Cara menulis script di Visual Studio Code :

  1. Ketik Visual Studio Code pada Type here to searche ->Visual Studio Code seperti gambar berikut : Sehingga tampil text editor Visual Studio Code seperti berikut :
  1. Buka folder untuk lokasi file yang akan kita simpan, pada contoh ini membuka folder htdocs yang ada di lokasi C:\xampp\htdocs dengan cara klik File→Open Folder→Cari Lokasi
  1. Selanjutnya buat folder baru dengan nama Modul_HTML_CSS_Javascript dengan cara klik New FolderKetik_nama_folder yang ingin dibuat →Enter, nama folder usahakan tidak menggunakan spasi.
  2. Di folder yang sudah kita buat kita bisa langsung membuat file baru atau membuat folder lagi, pada contoh ini membuat folder baru dengan nama Modul_1. Dengan cara klik kanan pada folder yang sudah kita buat sebelumnya→klik New Folder→Ketik nama folder yang akan dibuat →Enter
  3. Membuat file HTML, pada Folder Modul_1 tersebut klik kanan→klik New File→ketik nama file yang akan dibuat diakhiri dengan extensi .html
  4. Mengetik Script pada Text Editor.

Setelah editor terbuka, sekarang silahkan ketik script seperti gambar berikut Terlihat Visual Studio Code memberikan nomor pada setiap baris script yang kita ketikkan. Untuk saat ini kita belum membahas tentang arti dari script diatas, kita cukup memahami bahwa semudah itulah mengetik script pemrograman di Visual Studio Code ini.

  1. Cara Menyimpan Script.

Setelah selesai menulis script, maka kita harus menyimpannya terlebih dahulu, agar nanti jika ada perbaikan kita dapat mengeditnya kembali. Untuk menyimpan script ini silahkan Kita klik menu File->Save atau dengan menekan CTRL+S pada keyboard.

  1. Cara menjalankan Script. Ada dua cara menjalankan script HTML ini, yaitu :
    1. Langsung dari editor Visual Studio Code dengan cara klik menu Run→Start Debugging atau langsung tekan F5→pilih jenis browser yang ada di komputer kita, pastikan kita memilih browser yang telah terinstall di komputer kita.
    2. Melalui jendela windows explorer, dengan cara meng-klik langsung pada file HTML tersebut, perhatikan gambar berikut : Silahkan lakukan klik ganda pada file HTML tersebut (latihan1.html), sehingga akan terbuka sebuah web browser dan menampilkan hasil dari script tersebut. Perhatikan gambar berikut : Inilah hasil dari script yang kita buat tersebut. Selamat kita telah berhasil membuat halaman web yang pertama menggunakan script HTML.
  1. Cara Menutup Editor Visual Studio Code

Jika telah selesai bekerja dengan editor Visual Studio Code, maka tutuplah dengan cara klik menu File->Exit atau tekan langsung tombol ALT+F4, maka editor Visual Studio Code akan tertutup dari monitor.

  1. Cara membuka kembali/mengedit

File script HTML yang telah disimpan sebelumnya, dapat diedit kembali dengan cara :

  • Aktifkan terlebih dahulu Visual Studio Code

Dari menu yang ada, klik menu File->Open Folder, dari jendela yang muncul pilih folder lokasi dari file tersebut, kemudian pilih file yang akan dibuka/diedit, maka script tersebut akan kembali tampil dan dapat kita edit kembali.

 

Daftar Pustaka :

Related Post

1 Trackback / Pingback

  1. Modul HTML #2 : Konsep Dasar HTML - agussuratna.net

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy