Kemajuan teknologi saat ini yang sudah mulai memasuki era 5.0 di mana segala sesuatunya lebih semakin mudah dan intens untuk diakses dan dijalankan secara digital dan online, pada satu sisi semakin membuka peluang dan tantangan bagi kita untuk ikut terjun, salah satunya sebagai programer atau desainer web.
Ya, web seperti Kompasiana ini yang menyediakan tempat bagi kita untuk berbagi ilmu, karya, opini dan juga pengalaman, atau web sosial media semacam Facebook, Instagram dan Youtube atau web online store semacam Tokopedia, Lazada dan Bukalapak, ataupun web pribadi, perusahaan, instansi atapun lembaga pada umumnya. Banyak peluang yang bisa didapat oleh programer ataupun desainer web, karena bidang ini pun sebenarnya terbagi menjadi beberapa bagian baik pada sisi front-end maupun back-end.
Pada sisi front-end, pengembangan web terkonsentrasi pada pengaturan tampilan atau user interface (UI) dan pengalaman pengguna atau user experience (UX). Sementara pada sisi back-end, pengembangan web terkonsentrasi pada sistem yang dijalankan untuk mengelola konten dan data yang akan ditampilkan dan atau dimanipulasi pada web serta berbagai layanan terkait dengan kegiatan yang ada misalnya menampilkan maps yang diperoleh dari pihak penyedia maps seperti Google Maps dan OSM dan pembayaran dengan pihak perbankan ataupun penyedia payment gateway pada web online store.
Pada prakteknya, untuk web skala menengah ke atas dengan tampilan dan konten yang cenderung dinamis serta sistem yang cukup rumit semacam portal berita, web sosial media dan online store, bidang front-end dan back-end akan dikerjakan oleh orang atau tim yang berbeda.Â
Sementara pada web skala kecil yang biasanya hanya menampilkan konten yang cenderung statis atau tidak terlalu rumit semacam web pribadi dan perusahaan yang hanya menampilkan informasi semacam profil, portofolio dan kontak biasanya dikerjakan oleh satu orang atau tim yang mempunyai keahlian baik desain maupun sistem yang biasa disebut dengan full stack web developer.
Untuk bidang front-end, kita dituntut untuk bisa mengatur sedemikian rupa tampilan web hingga memudahkan dan tidak menjenuhkan pengunjung dan pengguna.
Misalnya pemilihan warna dan jenis huruf yang eye catching, tata letak menu dan konten pada halaman web yang tidak kaku, pengisian formulir yang tidak ribed, serta urutan atau proses transaksi yang mudah--pada online store--dari memilih barang, menambah barang hingga melakukan pembayaran.
Sementara untuk bidang back-end, kita dituntut untuk membuat algoritma sistem yang efektif dan efisien terutama berkenaan dengan waktu penayangan (loading) konten ataupun waktu transaksi dan pemrosesan data, penanganan error, validasi hingga keamanan data pengunjung dan pengguna.
HTML, CSS, JavaScript, PHP & MySQL
Dapat diibaratkan, web adalah sebuah restoran dengan HTML sebagai bangunan restoran beserta segala komponennya, sementara CSS adalah desain atau pengaturan dari bangunan tersebut: warna cat apa yang akan digunakan, berapa ukuran pintu dan jendela, di mana dan bagaimana bangku dan meja akan ditempatkan, dan sebagainya.
JavaScript dapat diibaratkan sebagai pelayan ataupun kasir yang secara langsung melayani dan berinteraksi dengan pengunjung restoran. PHP adalah bagian yang menjalankan kegiatan internal dan eksternal restoran seperti menyediakan masakan yang dipesan dan berhubungan dengan pihak-pihak luar restoran. MySQL sendiri bisa diibaratkan sebagai dapur atau rak penyimpanan yang menyediakan segala bahan dan material restoran.
HTML, CSS & JavaScript merupakan bagian front-end development sementara PHP & MySQL masuk pada bagian back-end development.
Secara teknis, penyusunan web menggunakan kode-kode teks. Baik HTML, CSS, JavaScript, PHP dan MySQL merupakan atau dikelola menggunakan kode-kode teks. Kode-kode yang kemudian akan diterjemahkan oleh aplikasi penerjemah baik yang berada pada server maupun yang berada pada komputer pengunjung atau client web yang kita kenal dengan perambah atau browser semacam Chrome, Firefox atau Opera menjadi sebuah tampilan web.
HTML merupakan singkatan dari Hypertext Markup Language. Ibarat bangunan, web sebenarnya sudah dapat didirikan cukup menggunakan HTML. Kode-kode HTML dapat ditulis langsung menggunakan aplikasi editor teks semacam Notepad atau Sublime Text yang kemudian disimpan menjadi file dengan ekstensi .html. File HTML kemudian dapat secara langsung dibuka menggunakan browser.
Sebagai contoh, silahkan ketik atau salin beberapa baris kode di bawah ini ke dalam Notepad lalu simpan misalnya dengan nama file test.html. Buka file test.html yang telah tersimpan menggunakan aplikasi browser.
Ya, kode-kode di atas akan berubah menjadi seperti tampilan pada gambar di bawah ini.
Kita akan mencoba memberi style pada tampilan test.html di atas. Pertama, kita buat sebuah file baru menggunakan Notepad dengan nama test.css. Tulis atau salin kode-kode di bawah ini ke dalam file test.css.
Selanjutnya, ubah isi file test.html yang telah kita buat sebelumnya menjadi seperti di bawah ini lalu simpan kembali dan buka atau jalankan kembali menggunakan browser.
Sekarang tampilannya sudah berubah seperti gambar di bawah ini.
JavaScript misalnya digunakan untuk menampilkan popup salam atau iklan saat pengunjung pertama kali membuka web, atau untuk memvalidasi inputan kolom email di mana jika email yang dituliskan tidak valid akan memunculkan peringatan.
Seperti halnya CSS, kode-kode JavaScript dapat ditulis sebagai file terpisah ataupun disisipkan ke dalam kode-kode atau file HTML.
Sekarang kita akan mencoba membuat sebuah fungsi di mana saat kita klik logo Kompasiana pada test.html maka warna teks Header Utama dan Sub Header akan bertukar. Untuk itu silahkan ketik atau salin kode-kode di bawah ini ke dalam sebuah file yang diberi nama test.js.
Ubah kembali isi file test.html menjadi seperti di bawah ini lalu simpan kembali dan buka atau jalankan kembali menggunakan browser.
Sekarang, coba klik gambar logo Kompasiana pada test.html yang ditampilkan di browser. Jika benar, maka warna teks Header Utama dan Sub Header akan bertukar.
Adapun PHP (Hypertext Preprocessor), ia hampir sama dengan JavaScript. Bedanya, jika kode-kode JavaScript akan dieksekusi di sisi client web maka kode-kode PHP akan dieksekusi di sisi server web. Karenanya, kode-kode JavaScript akan masih dapat dilihat oleh pengguna web melalui mode page source yang biasa ditampilkan dengan menekan tombol Ctrl+U sedangkan untuk PHP yang akan ditampikan hanyalah hasil eksekusinya.
Perbedaan lainnya, PHP membutuhkan aplikasi interpreter untuk dapat menampilkan hasil eksekusi PHP, jika tidak maka PHP akan ditampilkan secara 'mentah', seperti misalnya jika kita membuka file PHP secara langsung menggunakan browser web.
Misalnya kita akan menampikan biaya pengiriman paket dari Jakarta ke Brebes. Kita akan melakukan perhitungan tarifnya menggunakan JavaScript dan PHP.
Berikut kode-kode HTML disertai kode-kode kalkulasi menggunakan JavaScript:
Dan berikut kode-kode HTML disertai kalkukasi menggunakan PHP:
Kedua kode di atas akan menghasilkan tampilan berikut:
MySQL merupakan sebuah sistem untuk menampung dan mengelola data (database). Data yang ditampung dalam MySQL bisa merupakan data konfigurasi yang berhubungan dengan web misalnya data login pengguna, nama web atau data pemilik web ataupun data konten dan transaksi yang terjadi dalam web.
Untuk menginput atau menampilkan data pada MySQL dari atau ke dalam web menggunakan PHP. Alur penginputan data dari pengguna web ke database MySQL biasanya sebagai berikut:
- Pengguna melakukan input data melalui form yang telah disediakan
- Data kemudian dapat divalidasi menggunakan JavaScript
- Data yang tervalidasi akan dikirim ke PHP
- PHP dapat melakukan validasi ulang sebelum dimasukkan ke dalam database MySQL
XAMPP
Bahasa pemrograman yang digunakan di sisi server web sebenarnya bukan hanya PHP. Bahasa-bahasa pemrograman lain pun banyak digunakan juga seperti Java dan Python termasuk Ruby yang digunakan oleh Twitter dan Golang yang digunakan oleh Google.
Begitupun MySQL, ia bukanlah sistem database satu-satunya yang digunakan untuk mengelola data web namun masih banyak juga yang lainnya seperti MariaDB, PostgresSQL, MongoDB serta Oracle.
Namun demikian, PHP & MySQL memang cukup populer di mana selain gratis untuk digunakan juga tersedia dukungan dari banyak komunitas penggunanya terutama di sosial media.
Juga untuk keperluan development telah tersedia aplikasi paket semacam XAMPP ataupun LAMP yang sudah mencakup aplikasi interpreter PHP & database MySQL di dalamnya selain Apache yang berfungsi sebagai aplikasi server. Belakangan XAMPP mengganti MySQL dengan MariaDB--yang dikembangkan pula dari MySQL.
Mulai Darimana?
Seperti telah saya sebutkan sebelumnya, bahwa web development menyediakan banyak bidang untuk kita jalani. Jika kita lebih suka dengan desain web, kita bisa memilih menjadi desainer web pada sisi front-end. Jika kita  lebih suka kepada algoritma dan pemrograman, kita bisa memilih bidang back-end. Atau kita bisa pula memilih sebagai full stack web developer.
Toh, sekarang sudah tersedia banyak tools baik itu CMS maupun framework yang sangat membantu dan memberi kita banyak kemudahan. Dengan CMS dan framework, kita tidak perlu mempersiapkan segalanya dari nol.
Membuat web dengan CMS atau Content Management System, sesuai namanya, ibarat kita akan membuka toko, bangunan dengan segala perabotannya baik etalase, lemari, gudang dan sebagainya telah disediakan. Kita tinggal mengisinya dengan konten.
Sementara membuat web dengan framework, bangunan toko belum jadi namun segala bahan bangunan dan sistem rancang bangun telah tersedia. Kita tidak perlu menyediakannya lagi satu per satu, kita tinggal membangunnya dan kemudian mengisinya dengan konten.
Contoh CMS misalnya WordPress dan Joomla. Contoh framework misalnya Bootstrap (framework CSS & JavaScript) atau CodeIgniter, Laravel & Symfony (framework PHP). Dalam penggunaannya, kedua jenis framework (front-end & back-end) dapat dipadupadankan.
Namun demikian, pengetahuan tentang HTML, CSS dan JavaScript serta PHP dan MySQL--ataupun bahasa pemrograman dan database lainnya, tentu sangat diperlukan.
Membuat web sama halnya dengan memasak. Meski segala perlengkapan memasak telah tersedia, segala bahan dan bumbu telah tersedia, tanpa pengetahuan tentang memasak, tentu tidak akan dapat menghasilkan masakan yang enak atau bahkan tidak jadi sama sekali.
Lalu, darimana atau di mana kita bisa belajar tentang pemrograman atau desain web, sementara kita sendiri tidak memiliki dasar pengetahuan tentang pemrograman dan desain web?
Menjadi programer atau desainer web sebenarnya terbuka untuk siapa saja, bahkan bagi yang tidak memiliki dasar pengetahuan tentangnya. Untuk memulai langkah, kita bisa antara lain dengan membeli buku-buku tentang cara membuat web yang bisa didapatkan di toko-toko buku yang bisa kita pelajari secara mandiri atau dengan mengikuti kursus-kursus atau panduan-panduan baik secara langsung yang disediakan oleh lembaga-lembaga pendidikan ataupun secara online seperti melalui w3schools.com yang menyediakan kursus gratis juga sertifikasi lengkap dari HTML, CSS, JavaScript hingga PHP dan bahasa-bahasa pemrograman web lainnya termasuk pengelolaan database, juga dengan mengikuti komunitas-komunitas dan forum-forum pembelajaran maupun programer dan atau desainer web di mana kita bisa bertanya dan belajar banyak hal dari mereka yang telah menekuninya lebih dulu.
Oiya, menjadi programer atau desainer web, kita bisa menjalaninya baik dengan berkarir di perusahaan penyedia jasa pembuatan web atau perusahaan yang mempunyai web dan terutama menjalankan usahanya berbasis web tersebut ataupun berkarir secara mandiri sebagai freelancer. Dan menjadi programer atau desainer web termasuk mengasyikkan karena pekerjaan yang ada bisa dijalankan secara remote atau dengan istilah yang sedang populer saat ini, work from home.
Tertarik? Silahkan klik dan telusuri tautan-tautan di bawah ini. Salam!
- w3schools.com - tutorial dan sertifikasi
- XAMPP - aplikasi paket server web
- Sublime Text - aplikasi editor teks
- Desainer Web Indonesia - group Facebook
- PHP Indonesia - group Facebook
- PHP MySQL Indonesia - group Facebook
- Freelancer - contoh lowongan kerja desainer web
Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H
