Mempelajari Pemrograman Web

Sudah 3 tahun terakhir ini semenjak saya benar-benar ‘menjeburkan’ diri di bidang teknologi informasi dan mengawalinya dengan menjalani kuliah di program studi teknik informatika, sebagian besar aktifitas saya dihabiskan di web browser: emailblogging, menggunakan cloud computing dan banyak hal lainnya. Aplikasi desktop yang ada di komputer saya jadi banyak yang menganggur.

Kalau saat ini, aplikasi dekstop yang cukup sering saya gunakan paling hanya Microsoft Office, 7zip (untuk menangani compressed archive), beberapa IDE (NetBeans, Visual Studio), SourceTree (untuk version control system), beberapa teks editor canggih (Sublime, Notepad++) dan MuseScore (untuk menulis partitur lagu). Ada juga beberapa aplikasi yang terkait dengan sistem seperti Windows Explorer atau command prompt. Aplikasi yang selain disebutkan di atas jadi jarang sekali dipakai.

Jangan-jangan nanti semua komputer akan jadi thin client semua ya? Cukup hanya dengan web browser dan semua hal bisa dilakukan. Bisa jadi juga kan ya?

Bayangkan, kalau mau mencari video, sekarang sepertinya orang-orang lebih suka streaming di YouTube. Untuk memutar lagu, web browser sekarang juga bisa. Aplikasi web seperti SoundCloud misalnya, penuh dengan rekaman data audio yang menarik. Untuk pekerjaan kantor tidak perlu ditanya lagi. Ada Google Drive dan SkyDrive. Semuanya bisa dijalankan di web browser.

Jadi, kalau bicara masalah peluang di masa depan, saya rasa belajar web programming merupakan hal yang sangat tepat.😀

Ada yang tertarik untuk mempelajari web programming? Tulisan saya kali ini membahas tentang langkah-langkah yang bisa diikuti jika pembaca ingin mempelajari pemrograman web. ;)

Mendesain Layout Halaman Web

Pertama kali saat mempelajari hal-hal yang berkaitan dengan web, hal pertama yang harus dipahami adalah tentang Hypertext Markup Language (HTML) dan Cascading Style Sheet (CSS). HTML dan CSS merupakan gerbang pertama yang harus dipelajari untuk membuat halaman web.

Pembaca sekarang sedang melakukan browsing dengan Google Chrome atau Firefox? Coba sekarang tekan Ctrl + U.

Nah, sudah kembali ke halaman ini?😛 Kode-kode panjang yang pembaca lihat setelah menekan shortcut tersebut merupakan elemen penyusun dari website yang sedang pembaca kunjungi ini.

Setiap halaman yang pembaca lihat di web browser tersusun dari struktur kode-kode HTML tersebut. Di dalamnya, bagian-bagian dari halaman tersebut diberi spesifikasi tampilan (style) dengan menggunakan CSS.

Ada banyak resources yang dapat digunakan oleh pembaca untuk mempelajari HTML. Coba saja kunjungi w3schools misalnya.

Tampilan halaman depan w3schools.

Sebenarnya, di dunia nyata, proses mendesain halaman web tidak langsung ke kode HTML dan CSS. Sebelum memutuskan untuk mengembangkan suatu halaman web, terlebih dahulu si pengembang harus memikirkan kira-kira bentuk website-nya akan seperti apa. Bentuk website tersebut pada awalnya digambar sketsanya atau biasa disebut juga wireframing. Setelah terpetakan, barulah desainer web bisa mendesain halamannya. Itupun tidak langsung menggunakan HTML dan CSS. Pada awalnya desain web tersebut hanya digambar biasa dengan software seperti Adobe Photoshop atau Illustrator.

Setelah desainnya benar-benar fix, barulah kemudian tampilan websitenya dibangun dengan HTML dan CSS.

Jika pembaca merasa sudah cukup mengerti tentang HTML dan CSS, cobalah pelajari bagaimana mengubah gambar desain menjadi halaman web yang sebenarnya. Ada banyak tutorial yang bisa pembaca cari. Biasanya saya melihat tutorial-tutorial tersebut di websitewebsite ini: 1stwebdesigner, Tuts+, CSS-Tricks. Masih banyak website lain yang juga bagus. Googling saja.😉

HTML 5, CSS 3, dan Lainnya

Jika pembaca sudah mulai menguasai dasar-dasar HTML, coba pelajari tentang HTML 5 dan CSS 3. Dengan 2 teknologi ini, pembaca bisa membuat sesuatu yang lebih powerful dibanding dengan HTML dan CSS biasa.  Bahkan dengan HTML 5, pembaca bisa membuat aplikasi seperti game. Selain itu jika pembaca juga mau mempelajari JavaScript, hanya dengan HTML, CSS dan JavaScript, pembaca bisa membuat aplikasi mobile. Coba lihat: PhoneGap, Steroids, dan Ionic Framework.

Mulai Mendalami Web Programming

Setelah mempelajari HTML dan CSS, langkah selanjutnya adalah mempelajari bahasa pemrograman web yang berjalan di sisi server. Ada buanyak (saking banyaknya) bahasa pemrograman yang bisa pembaca pelajari. Di antaranya ada PHP, ASP dan ASP.NET, Java, Ruby, Python dan lainnya. Pilihlah 1 bahasa dan fokuslah ke bahasa pemrograman tersebut sampai benar-benar menguasainya.

Kalau saran pribadi dari saya, pelajarilah PHP terlebih dahulu. Di antara bahasa-bahasa tersebut, PHP merupakan yang paling banyak penggunanya untuk  saat ini. Selain itu, nanti jika pembaca ingin mempunyai website sendiri misalnya, hosting di Indonesia rata-rata sudah mendukung PHP, sehingga akan lebih mudah untuk pembaca saat ingin mempraktikkan langsung hasil belajarnya.

Nanti, jika sudah menguasai PHP, berpindah ke bahasa lain tidak akan terlalu sulit. Saya pribadi bahkan tidak menganjurkan pembaca untuk langsung mempelajari Ruby, Python, dan ASP, karena bahasa-bahasa tersebut sangat strict dalam kerangka Model-View-Controller (akan saya bahas di bawah). Dengan PHP, pembaca bisa mempelajari konsep dasarnya dengan lebih mudah.

Bitnami WAMP Stack, salah satu tools yang dapat pembaca gunakan untuk mempelajari PHP web programming.

Bitnami WAMP Stack, salah satu tools yang dapat pembaca gunakan untuk mempelajari PHP web programming.

Oh iya, saat mempelajari web programming, pastikan pembaca mempelajari konsep form dengan benar. Di jagad web, yang membuat dunia di internet bisa seinteraktif seperti saat ini adalah karena adanya si tag <form> tersebut. Saat mempelajari form, pembaca pasti akan bertemu dengan terminologi seperti GET dan POST. Pelajari hal tersebut, karena disitulah nanti inti dari web programming. Jika pembaca sudah berurusan dengan form, biasanya pembaca juga akan berurusan dengan database. Pelajari pula syntax dasar dari Structured Query Language (SQL) seperti INSERT, SELECT, UPDATE dan DELETE. Pembaca akan akrab dengan 4 keywords tersebut.

Oh, satu lagi, bertahanlah dalam mempelajari programmingnya sendiri. Sebelum mempelajari hal seperti GET dan POST tadi, pembaca pasti akan berurusan terlebih dahulu dengan dasar-dasar pemrograman seperti branching (percabangan) dan looping (perulangan). Setelah itu, pembaca juga pasti akan bertemu tentang konsep function dan bahkan Object Oriented Programming. Di sinilah kesungguhan pembaca dalam mempelajari dunia komputer akan diuji. Mereka yang berhasil di tahap ini biasanya akan sukses.😉

Nah, tentang sumber untuk belajarnya, kalau saran pribadi dari saya, cobalah cari buku atau e-book soal web programming. Sumbernya bisa banyak sekali. Untuk yang mau belajar PHP, di Google ketikkan saja php programming filetype:pdf dan pembaca akan kebanjiran dokumen PDF yang membahas tentang web programming menggunakan PHP.

Tampilan halaman it-ebooks.info, website penyedia e-book komputer gratis.

Tampilan halaman it-ebooks.info, website penyedia e-book komputer gratis.

Oh iya, satu lagi, satu lagi.😛 Bertahanlah dengan banyaknya konten yang ber-Bahasa Inggris, karena Bahasa Inggris adalah lingua franca-nya para ahli komputer. Just keep learning, dan pastikan Google Translate ada di salah satu tab pembaca saat browsing.😀

Untuk memastikan bahwa pembaca benar-benar mengerti tentang web programming, cobalah membuat aplikasi web sederhana dari scratch, yakni benar-benar dari 0. Pembaca bisa membuat aplikasi blog sederhana, atau buku tamu sederhana, atau mungkin galeri foto sederhana, atau bahkan jejaring sosial sederhana? Apapun itu, cobalah membuatnya sampai benar-benar jadi. Pembaca akan lebih banyak mendapatkan ilmunya nanti, dibanding hanya sekedar membaca buku. Pastikan pembaca benar-benar mempraktikkannya ya.🙂

Melompat ke Advanced Topics

Ketika pembaca merasa sudah benar-benar mengerti tentang bagaimana penggunaan HTML dan CSS, serta bagaimana mengintegrasikannya agar dapat mengirim dan mengambil data secara dinamis ke database dengan menggunakan salah satu bahasa pemrograman web, cobalah untuk melanjutkannya dengan mempelajari hal-hal berikut:

MVC Framework

Ada kalanya nanti ketika pembaca membuat 1 aplikasi web yang cukup kompleks, dan kode pembaca sudah demikian banyak, sehingga rasanya seperti berantakan sekali. Jika pembaca telah merasa demikian, ada baiknya pembaca mempelajari penggunaan MVC framework.

MVC adalah singkatan dari model-view-controllersebuah software-pattern yang memungkinkan pembaca untuk menyusun aplikasi dengan 3 objek utama yaitu model (sebagai entitas utama yang digunakan untuk mengakses data), view (sebagai tampilan yang dilihat pengguna) dan controller (sebagai pengendali utama aplikasi).

Skemanya kurang lebih bisa dilihat di gambar di bawah ini:

Tipikal kolaborasi dari komponen MVC.

Bahasa pemrograman web seperti Ruby dan ASP.NET telah menganut pattern ini di dalam fungsi utamanya. Mempelajari Ruby dan ASP.NET akan membuat pembaca merasakan langsung bentuk pattern ini.

Di PHP, ada beberapa MVC framework yang dapat pembaca gunakan, di antaranya: Yii, CakePHP, Laravel, Zend, Symfony.

Dengan menggunakan framework, aplikasi yang pembaca buat akan lebih terstruktur dan lebih mudah untuk dipelihara. Jika pembaca terjun di dunia web programming yang sebenarnya, ketika suatu aplikasi web dikembangkan oleh banyak programmer, barulah nanti akan terasa bahwa menggunakan framework yang telah ada atau setidaknya menggunakan pattern MVC akan mempermudah pengembang untuk terus memperbarui aplikasinya.

CakePHP, salah satu PHP MVC framework.

CakePHP, salah satu PHP MVC framework.

Javascript dan AJAX

Pembaca pernah melihat website yang di halaman depannya ada slideshow gambar, atau ada efek-efek transisi atau mungkin efek bergerak yang menarik? Nah, disitulah peran Javascript.

Javascript adalah sebuah bahasa pemrograman dynamic yang berjalan di sisi client dan merupakan bagian dari web browser yang pembaca pakai. Dengan menggunakan Javascript, pembaca bisa memodifikasi elemen-elemen  (Document Object Model atau DOM) halaman web secara langsung dan berinteraksi dengan pengguna dengan konten yang interaktif. Mempelajari Javascript akan membantu pembaca untuk memperkaya user experience dari halaman web yang pembaca kembangkan.

Jika pembaca ingin mempelajari dasar-dasar dari Javascript, pembaca bisa mempelajarinya secara interaktif di Codecademy. Di sana nanti pembaca akan mendapatkan instruksi-instruksi yang bisa pembaca ikuti untuk mendalami Javascript.

Jika pembaca sudah mulai menguasainya, cobalah mencoba-coba kode Javascript yang pembaca pelajari dengan meletakkannya langsung di halaman web sebagai latihan.

Nah, setelah merasa sudah mulai menguasai Javascript, pembaca bisa mencoba Javascript library seperti jQuery misalnya. Dengan menggunakan library, pembaca bisa melakukan banyak aksi-aksi ataupun menambahkan efek-efek tertentu tanpa harus membuatnya dari awal.

Halaman depan website jQuery.

Halaman depan website jQuery.

Di Javascript, ada sebuah teknik menarik yang disebut AJAX. AJAX merupakan singkatan dari Asynchronous Javascript and XML, yaitu sebuah teknik untuk menciptakan aplikasi web yang responsif. Dengan menggunakan AJAX, pengguna halaman web tidak perlu berpindah dan me-load halaman dari awal, karena segala sesuatunya telah dilakukan dibelakang pengguna secara asynchronous tanpa pengguna sadari.

Dengan menggunakan AJAX, website akan terasa lebih responsif dan interaktif di mata pengguna. SoundCloud, Facebook dan Twitter adalah contoh aplikasi yang menggunakan AJAX. Saat mengetikkan komentar di salah satu posting di Facebook misalnya, pembaca cukup mengetikkan komentar dan menekan enter, dan tahu-tahu komentar pembaca sudah ditampilkan di sana bukan? Sebenarnya, tanpa disadari, saat penggunanya menekan enter setelah mengetik komentar, sang Facebook di belakang layar melakukan pengiriman data ke server dan langsung menampilkannya tanpa harus berpindah halaman.  Seperti itulah contoh pemanfaatan AJAX. Kalau pembaca sudah menguasai jQuery, melakukan AJAX tidak akan menjadi pekerjaan sulit.

MV* Framework Dengan Javascript

Beberapa aplikasi web, ada yang sebagian besar kodenya merupakan kode Javascript. Biasanya, aplikasi yang didesain hanya berkutat di 1 halaman (disebut juga single page application atau disingkat SPA) akan mengalaminya. Saat sebagian besar aksi perpindahan halaman harus ditentukan dengan menggunakan Javascript, tentu kode Javascript yang ada akan menjadi banyak dan biasanya tidak terstruktur, sama kasusnya seperti kasus MVC pada bahasa pemrograman web seperti PHP yang kita bahas sebelumnya di atas.

Untuk mengatasi hal ini, konsep MVC pun juga dianut dalam pemrograman Javascript, hanya saja yang dipakai adalah konsep turunannya, dan ada banyak sebutan dari turunan pattern MVC ini. Ada yang menyebutnya MVVM (model-view-view model), ada juga yang menyebutnya MVP (model-view-presentation). Karena itu, biasanya turunan-turunan dari MVC ini disingkat menjadi MV*.

Ada banyak MV* framework ini dan tentunya semuanya diprogram dengan Javascript. Di antaranya ada: AngularJS, Backbone.js, Knockout.js, dan Ember.jsFramework-framework ini sudah banyak digunakan di berbagai aplikasi-aplikasi yang besar. Framework Backbone.js saja sudah dipakai di aplikasi seperti WordPress, Four Square dan SoundCloud (coba lihat di sini).

Halaman depan website AngularJS.

Halaman depan website AngularJS.

Demikianlah kira-kira langkah-langkah yang dapat diikuti untuk mempelajari pemrograman web. Tulisan ini kurang lebih bersumber dari pengalaman pribadi saya juga, hehe. Pada akhirnya, siapapun orangnya dan bagaimanapun caranya saat mempelajari web programming pasti akan berhadapan dengan beberapa atau mungkin semua hal yang saya bahas di tulisan ini. Jika ada pembaca yang ingin menambahkan, memberi saran atau mengkritik terkait tulisan ini, silakan disampaikan lewat komentar, dan akan saya terima dengan tangan terbuka.

Mempelajari sesuatu merupakan tantangan yang besar, dan ketika berhasil pasti akan sangat menyenangkan rasanya. Mudah-mudahan pembaca yang ingin mempelajari web programming bisa dipermudah dengan adanya tulisan ini. Semoga bermanfaat.😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s