Blog menjadi wadah online yang bagus dikarenakan kemampuannya untuk mempromosikan produk, jasa, atau hanya sekedar menulis apa yang dimau. Namun untuk mengelola blog, kita setidaknya perlu mengetahui apa-apa saja bahasa pemrograman yang digunakan untuk membangunnya.
Daftar Isi
1. HTML
1.1 Defenisi HTML?
HTML singkatan dari HyperText Markup Language. HTML merupakan bahasa pemrograman dasar yang digunakan untuk membuat struktur dan tampilan halaman web. HTML menggunakan tag atau kode yang ditulis di antara tanda kurung siku (< dan >) untuk menentukan elemen-elemen seperti judul, paragraf, gambar, link, tabel, dan lain-lain.
1.1.1 Contoh tag HTML adalah sebagai berikut:
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf</p>
<img alt="Ini adalah gambar" src="gambar.jpg" />
<a href="https://www.siko.my.id">siko.my.id</a>
<table>
<tbody><tr>
<td>Ini adalah sel tabel</td>
<td>Ini juga sel tabel</td>
</tr>
</tbody></table>
1.1.2 Tag-tag HTML harus ditutup dengan tanda slash (/) di dalam tanda kurung siku. Contohnya:
<h1>Ini adalah judul</h1> <p>Ini adalah paragraf</p>
1.1.3 Tag-tag HTML juga bisa memiliki atribut yang memberikan informasi tambahan tentang elemen. Contohnya:
<img src="gambar.jpg" alt="Ini adalah gambar" width="300" height="200"> <a href="https://www.siko.my.id" target="_blank">siko.my.id</a>
Atribut src menentukan sumber gambar, atribut alt menentukan teks alternatif jika gambar tidak muncul, atribut width dan height menentukan ukuran gambar, atribut href menentukan alamat link, dan atribut target menentukan apakah link akan dibuka di tab baru atau tidak.
1.2 Bagaimana cara kerja HTML?
HTML bekerja dengan cara mengirimkan kode-kode HTML dari server ke browser. Browser kemudian akan membaca dan menafsirkan kode-kode HTML tersebut lalu menjadi halaman web yang bisa dilihat oleh pengguna. Browser juga akan mengatur tampilan halaman web sesuai dengan aturan CSS (Cascading Style Sheets) yang bisa ditulis di dalam atau di luar kode HTML.
1.2.1 Contoh kode HTML dan CSS adalah sebagai berikut:
<html>
<head>
<style>
h1 {
color: blue;
font-family: Arial;
}
p {
color: green;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf</p>
</body>
</html>
Kode CSS di atas menentukan warna dan jenis font untuk elemen h1 (judul) dan p (paragraf). Kode CSS bisa ditulis di antara tag <style> di dalam tag <head>, atau bisa juga ditulis di file terpisah dengan ekstensi .css dan dihubungkan dengan tag <link> di dalam tag <head>.
1.3 Apa saja kelebihan dan kekurangan HTML?
1.3.1 Kelebihan HTML adalah sebagai berikut:
- HTML mudah dipelajari dan digunakan oleh pemula.
- HTML juga kompatibel dengan semua browser dan perangkat.
- HTML bisa dikombinasikan dengan bahasa pemrograman lain seperti JavaScript dan PHP untuk membuat halaman web yang lebih interaktif dan fungsional.
1.3.2 Kekurangan HTML adalah sebagai berikut:
- HTML memiliki keterbatasan dalam hal desain dan interaksi, serta tidak bisa membuat halaman web yang dinamis dan responsif tanpa bantuan bahasa pemrograman lain.
- HTML juga rentan terhadap kesalahan penulisan kode yang bisa menyebabkan halaman web tidak tampil dengan baik atau bahkan rusak.
1.4 Contoh-contoh penggunaan HTML dalam halaman web
HTML bisa digunakan untuk membuat berbagai jenis halaman web, seperti:
- Halaman web statis yang hanya menampilkan informasi teks, gambar, atau video tanpa adanya perubahan atau interaksi dari pengguna. Contohnya adalah halaman web profil, biografi, artikel, dll.
- Halaman web dinamis yang bisa berubah-ubah sesuai dengan input atau aksi dari pengguna. Contohnya adalah halaman web formulir, kuis, permainan, dll.
- Halaman web responsif yang bisa menyesuaikan tampilannya sesuai dengan ukuran layar atau perangkat yang digunakan oleh pengguna. Contohnya adalah halaman web yang bisa dilihat dengan baik di komputer, laptop, tablet, atau smartphone.
2. CSS
CSS adalah bahasa pemrograman yang sangat penting dalam pengembangan web. CSS memungkinkan kita untuk mengontrol gaya dan tampilan halaman web yang dibuat dengan HTML dengan cara yang mudah dan efisien. Dengan CSS, kita bisa menulis kode sekali dan menggunakannya di banyak halaman web tanpa harus mengulangi-ulangi kode HTML. CSS juga membantu kita untuk memisahkan struktur dan konten halaman web dari gaya dan tampilannya. Hal ini membuat halaman web lebih mudah untuk dimaintain dan diupdate.
Salah satu fitur utama dari CSS adalah cascading atau pewarisan. Cascading berarti bahwa aturan-aturan CSS yang kita tulis akan berlaku untuk elemen-elemen HTML yang sesuai dengan selector atau penunjuk yang kita gunakan. Selector bisa berupa nama elemen, kelas, id, atribut, atau kombinasi dari semuanya. Selector juga bisa menggunakan pseudo-class atau pseudo-element untuk menargetkan elemen-elemen HTML yang memiliki kondisi atau posisi tertentu. Contohnya, kita bisa menggunakan selector :hover untuk menargetkan elemen yang sedang di-hover oleh kursor mouse.
2.1 Contoh kode CSS yang menggunakan selector nama elemen, kelas, id, atribut, pseudo-class, dan pseudo-element:
/* Selector nama elemen */
h1 {
color: blue;
font-size: 36px;
}
/* Selector kelas */
.box {
width: 200px;
height: 200px;
border: 2px solid black;
}
/* Selector id */
#container {
display: flex;
justify-content: center;
}
/* Selector atribut */
img[alt="logo"] {
width: 100px;
}
/* Selector pseudo-class */
a:hover {
text-decoration: underline;
}
/* Selector pseudo-element */
p::first-line {
font-weight: bold;
}
Selain cascading, CSS juga mendukung media query yang bisa membuat halaman web menjadi responsif atau menyesuaikan dengan ukuran layar perangkat yang digunakan oleh pengguna. Media query bisa di artikan sebagai aturan-aturan CSS yang hanya berlaku jika kondisi tertentu terpenuhi, seperti lebar layar, orientasi layar, resolusi layar, dan sebagainya. Dengan media query, kita bisa membuat halaman web yang memiliki tampilan yang berbeda-beda sesuai dengan perangkat yang digunakan oleh pengguna.
2.1.1 Contoh kode CSS yang menggunakan media query untuk mengubah tampilan halaman web jika lebar layar kurang dari 600px:
/* Aturan CSS umum */
h1 {
color: blue;
font-size: 36px;
}
.box {
width: 200px;
height: 200px;
border: 2px solid black;
}
#container {
display: flex;
justify-content: center;
}
/* Aturan CSS khusus jika lebar layar kurang dari 600px */
@media screen and (max-width: 600px) {
h1 {
color: red;
font-size: 24px;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
}
#container {
flex-direction: column;
align-items: center;
}
Namun, CSS bukanlah bahasa pemrograman yang sempurna. CSS memiliki keterbatasan dalam hal interaksi dan logika dan tidak bisa membuat halaman web yang dinamis dan interaktif tanpa bantuan bahasa pemrograman lain seperti JavaScript. CSS juga tidak bisa melakukan perhitungan matematika, looping, kondisional, atau fungsi-fungsi lain yang biasa ada di bahasa pemrograman lain. Untuk mengatasi keterbatasan ini, ada beberapa teknologi yang bisa digunakan bersama dengan CSS, seperti preprocessors, frameworks, libraries, dan plugins.
3. JavaScript (JS)
JavaScript salah satu bahasa pemrograman yang paling populer di dunia web. Dengan JavaScript, halaman web bisa menjadi responsif dan menarik bagi pengguna. JavaScript memungkinkan untuk memanipulasi elemen-elemen HTML dan CSS pada halaman web, serta mengakses dan memodifikasi data yang disimpan di browser atau di server serta juga bisa berinteraksi dengan teknologi-teknologi lain seperti XML, JSON, WebSocket, dan WebAssembly untuk membuat aplikasi web yang canggih dan modern. Beberapa contoh aplikasi web yang dibuat dengan JavaScript adalah Gmail, Facebook, Twitter, Google Maps, dan Netflix.
Untuk menunjukkan kemampuan JavaScript dalam membuat halaman web yang dinamis dan interaktif, maka disini sudah disajikan beberapa contoh kode yang bisa dicoba:
// Menampilkan pesan selamat datang di halaman web
let nama = prompt("Siapa nama Anda?"); // Meminta input nama dari pengguna
alert("Selamat datang, " + nama + "!"); // Menampilkan pesan dengan nama pengguna
// Mengubah warna latar belakang halaman web secara acak
let warna = ["red", "green", "blue", "yellow", "pink", "purple"]; // Membuat array dengan enam warna
let indeks = Math.floor(Math.random() * warna.length); // Membuat angka acak antara 0 sampai 5
document.body.style.backgroundColor = warna[indeks]; // Mengubah warna latar belakang dengan warna acak
// Membuat slideshow gambar dengan menggunakan library jQuery
$(document).ready(function(){ // Menjalankan fungsi setelah dokumen siap
$(".slideshow").slick({ // Memilih elemen dengan kelas slideshow dan menerapkan fungsi slick
dots: true, // Menampilkan titik-titik sebagai indikator gambar
autoplay: true, // Mengaktifkan mode otomatis
autoplaySpeed: 2000, // Mengatur kecepatan pergantian gambar (dalam milidetik)
});
});
JavaScript memiliki banyak kelebihan, seperti fleksibilitas, portabilitas, ekspresivitas, dan komunitas yang besar dan aktif. Bahasa pemrograman ini bisa berjalan hampir disemua browser dan platform, baik di sisi klien maupun di sisi server. Selain itu juga memiliki sintaks yang mudah dipelajari dan dipahami, serta mendukung berbagai paradigma pemrograman seperti imperatif, deklaratif, fungsional, dan berorientasi objek. JavaScript juga memiliki banyak sumber belajar dan bantuan online, serta banyak library dan framework yang bisa membantu dalam mengembangkan aplikasi web dengan cepat dan mudah.
Namun, JavaScript juga jauh dari kata sempurna, seperti inkonsistensi, ketidakpastian, kesalahan, dan masalah performa. Penggunaannya bisa berbeda-beda perilakunya di browser yang berbeda, sehingga kode harus disesuaikan agar bisa berjalan dengan baik di semua browser. JavaScript juga memiliki fitur-fitur yang bisa menyebabkan kebingungan atau kesalahan seperti hoisting, coercion, scope, closure, prototype inheritance, dan this. Serta juga rentan terhadap serangan-serangan seperti cross-site scripting (XSS), cross-site request forgery (CSRF), dan denial-of-service (DoS). Kinerja JavaScript ini juga bisa menjadi lambat atau boros memori jika tidak dioptimalkan atau terlalu rumit.
4. PHP
PHP merupakan bahasa pemrograman yang populer di kalangan pengembang web. Bahasa Pemrograman ini memungkinkan kita untuk membuat halaman web yang dinamis dan interaktif dengan mengolah data dari server, serta juga bisa berinteraksi dengan berbagai database untuk menyimpan atau mengambil data yang dibutuhkan oleh aplikasi web. Salah satu contoh aplikasi web yang menggunakan PHP adalah blog. Untuk membuat blog dengan PHP, kita bisa menggunakan CMS (Content Management System) atau framework. CMS ini bisa diartikan sebagai sistem yang menyediakan antarmuka untuk mengelola konten tanpa harus menulis kode. Beberapa CMS yang populer dan menggunakan PHP seperti WordPress, Drupal, Joomla, dan lain-lain.
4.1 Contoh kode PHP untuk menampilkan “Hello World” di halaman web:
<?php echo "Hello World"; ?>
Kode di atas menggunakan fungsi echo untuk mencetak teks “Hello World” ke layar. Fungsi echo salah satu cara untuk mengirim output ke browser dari skrip PHP. Tanda <?php dan ?> digunakan untuk membuka dan menutup blok kode. Untuk kode PHP nya harus berada di dalam blok ini agar bisa dijalankan oleh server.
5. PYTHON
Python memiliki banyak keunggulan yang membuatnya cocok untuk berbagai macam proyek, termasuk pengembangan web. Pada bagian ini, kita akan membahas defenisi dari Python, apa saja kelebihan dan kekurangan Python, dan bagaimana cara menggunakan Python untuk pengembangan web.
5.1 Defenisi Python?
Python adalah bahasa pemrograman interpretatif yang berorientasi objek. Bahasa pemrograman ini diciptakan oleh Guido van Rossum pada tahun 1991. Nama Python sendiri diambil dari acara komedi Monty Python’s Flying Circus. Keterbacaan kode dan kesederhanaan sintaks menjadi filosofi desain atau ciri khas Python.
Python memiliki banyak library dan framework yang bisa memudahkan pengembang web untuk membuat aplikasi web dengan cepat dan mudah.
5.1.1 Beberapa contoh library dan framework Python untuk pengembangan web:
5.1.1.1 Django
Django merupakan framework web berbasis Python yang mengikuti pola desain model-view-template (MVT), untuk fiturnya seperti autentikasi pengguna, manajemen konten, sistem template, ORM (object-relational mapping), dan lain-lain.
5.1.1.1.1 Contoh kode Django:
python
# views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse("Hello, world!")
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
5.1.1.2 Flask
Flask menggunakan pola desain microframework yang tidak mengharuskan pengembang untuk menggunakan komponen-komponen tertentu seperti ORM atau sistem template. Flask memberikan kebebasan kepada pengembang untuk memilih komponen-komponen yang sesuai dengan kebutuhan proyek.
5.1.1.2.1 Contoh kode Flask:
python
# app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello, world!"
if __name__ == '__main__':
app.run()
5.1.1.3 Pyramid
Pyramid salah satu framework web berbasis Python yang mengikuti pola desain model-view-controller (MVC). sedangkan fitur yang dimiliki oleh Pyramid ini seperti routing URL, sistem template, dukungan database, dan lain-lain. Keunggulannya mampu mendukung pengembangan aplikasi web dengan skala besar atau kecil.
5.1.1.3.1 Contoh kode Pyramid:
python
# app.py
from pyramid.config import Configurator
from pyramid.response import Response
def hello(request):
return Response("Hello, world!")
if __name__ == '__main__':
config = Configurator()
config.add_route('hello', '/')
config.add_view(hello, route_name='hello')
app = config.make_wsgi_app()
5.2 Kelebihan dan Kekurangan Python
Python memiliki banyak kelebihan yang membuatnya menjadi bahasa pemrograman yang disukai oleh banyak pengembang web.
5.2.1 Beberapa kelebihannya:
- Sintaks yang sederhana dan mudah dibaca: Python menggunakan indentasi untuk menandai blok kode dan tidak memerlukan tanda kurung atau titik koma untuk mengakhiri pernyataan. Hal ini membuat kode Python lebih rapi dan mudah dibaca oleh manusia maupun mesin.
- Library dan framework yang banyak dan bervariasi: Python memiliki library standar yang menyediakan fungsi-fungsi dasar seperti input/output, manipulasi string, matematika, dll. Selain itu, Python juga memiliki library pihak ketiga yang bisa diinstal dengan mudah menggunakan pip (package manager Python). Library pihak ketiga ini bisa membantu pengembang web untuk melakukan berbagai hal seperti scraping data, analisis data, machine learning, artificial intelligence, dll. Framework web Python juga menyediakan fitur-fitur yang bisa mempercepat proses pengembangan web seperti routing URL, sistem template, ORM, dll.
- Komunitas yang besar dan aktif: Python memiliki komunitas pengguna dan pengembang yang besar dan aktif di seluruh dunia. Komunitas ini bisa memberikan dukungan, sumber belajar, tutorial, dokumentasi, contoh kode, dll. Komunitas ini juga sering mengadakan acara-acara seperti konferensi, workshop, hackathon, dll.
5.2.2 Beberapa kekurangan Python:
- Kecepatan yang rendah: Python adalah bahasa pemrograman interpretatif yang berarti kode Python harus dijalankan oleh interpreter terlebih dahulu sebelum dieksekusi oleh mesin. Hal ini membuat Python lebih lambat daripada bahasa pemrograman kompilatif seperti C atau Java. Kecepatan Python juga dipengaruhi oleh faktor-faktor lain seperti struktur data, algoritma, library,dll.
- Kompatibilitas antara versi 2 dan 3: Python memiliki dua versi utama yaitu versi 2 dan versi 3. Versi 3 merupakan versi terbaru dari Python yang memiliki beberapa perubahan signifikan dari versi 2. Namun masih ada banyak library dan framework yang hanya mendukung versi 2 atau belum sepenuhnya kompatibel dengan versi 3. Hal ini bisa menyebabkan masalah saat menggabungkan kode atau library dari versi yang berbeda.
Itulah beberapa jenis bahasa pemrograman yang digunakan untuk mengelola blog beserta kelebihan dan kekurangannya. Tidak ada bahasa pemrograman yang sempurna dan terbaik, kita perlu memilih bahasa pemrograman yang sesuai dengan kebutuhan, tujuan, dan kemampuan.
