Web Development

Saya yakin kalian semua pasti tahu apa itu website dan pernah membukanya, baik itu dari browser,
opera, firefox atau alat peramban lainnya. lalu apakah kalian tidak pernah merasa penasaran,
bagaima cara membuat website, cara kerjanya dan cara pengoprasiannya.
Kalau kalian penasaran, apakah kalian punyak keinginan mau belajar membuat sebuah website dan
menjadi seorang programmer web Developer atau pengembang Web. Gajinya besar lo... coba saja
browsing kalau gak percarya.
Sebelum belajar membuat website kalian lihat dulu gambar ini.

Apa yang ada di kepalah kalian di saat melihat gambar di atas?, apa kalian merasah pusing atau
merasa tertantang. kalau kalian merasa pusing itu wajar, karena code pemrograman di gambar itu
cukup rumit dan membingunkan dan jika kalian merasa tertantang maka les’go ikuti blog saya ini.

Ingat jangan pernah beranggapan kalau kalian tidak bisa dan tidak akan bisa, karena itu merupakan
sifat yang tidak percaya diri. Tidak ada manusia yang bodoh, yang ada hanyalah manusia yang tidak
mau belajar dan berusaha. Yang perlu kalian tahu, saya sendiri bukan seorang Mahasiswa, saya
hanya seorang lulusan SMA yang mempunyai cita cita tinggi, dan yang perlu kalian ketahui lagi
saya saja yang hanya lulusan SMA bisa membuat Web seperti yang kalian baca sekarang ini. Maka
kalian yang sudah menjadi seorang Mahasiswa, saya yakin bisa untuk melampui saya.

Menjadi seorang programmer web developer itu sebenarnya mudah lo, kalian juga tidak perlu
harus menghafalkan code satu persatu, seperti kalian menghafalkan vocab bahasa inggris. Yang
perlu kalian lakukan hanya sering praktek dan praktek, materi yang sudah kalian pelajari. Gak perlu
banyak omong lagi mari pegang tangan saya, lalu saya akan menuntun kalian agar bisa menjadi
seorang pengembang Web. Let’s bigin.

Perlu kalian ketahui ada beberapa syarat yang harus kalian pelajari terlebih dahulu agar
memudahkan kalian untuk belajar web Developer lebih lanjut.
• bisa menjalankan atau mengoprasikan komputer atau laptop
• bisa membuat direktori dan file di komputer
• bisa menjalankan aplikasi office, seperti: Microsoft Office atau Libre Office
 • bisa menggunakan aplikasi teks editor , seperti: Visual Studio Code, Sublime Text, atau
Notepad ++.
• memahami tentang gambar dalam berbagai format, seperti: JPEG atau PNG

Materi yang di pelajari:

1) Pengenalan Pemrograman Komputer
Materi pertama kita akan mengenal pemrograman komputer. Kan tidak masuk akal jika kita belajar
menjadi seorang penyembang Web tapi tidak tahu apa itu komputer, atau tidak tahu cara kerja
komputer.

Kata komputer itu berasal dari bahasa Latin yaitu Computare yang artinya menghitung. Kalau
secara definisi komputer diterjemakan sebagai sekumpulan alat elektronik yang saling bekerja
sama, dapat menerima data (input), mengolah data (proses) dan memberikan informasi (output)
serta terkoordinasi dibawah kontrol program yang tersimpan di memorinya.
Komputer memiliki dua komponen utama. Yang pertama adalah hardware (perangkat keras) dan
yang kedua adalah software (perangkat lunak)

HARDWARE
hardware (perangkat keras) merupakan komponen atau peralatan pada sistem komputer yang secara
fisik terlihat dan bisa di rasakan bentuk fisiknya. Contoh perangkat keras yang terdapat dalam
komputer yaitu :
• Central Processing Unit (CPU)
CPU atau bisa disebut juga dengan Processor, merupakan perangkat keras komputer yang
melakukan pemprosesan aritmatika dan logika serta pengendalian operasi komputer secara
keseluruhan. Prosesor terdiri atas dua bagian utama, yaitu ALU (Arithmetic Logic Unit)dan
Control Unit. Kecepatan kerja prosesor biasanya ditentukan oleh kecepatan clock dari
Control Unit-nya

• Memori
Memori adalah media penyimpanan data pada komputer. Memory, berdasarkan fungsinya
dibagi menjadi dua yaitu :
1) Primary Memory
Dipergunakan untuk menyimpan data dan instruksi dari program yang sedang dijalankan.
Seringkali disebut juga sebagai RAM. Karakteristik dari memori primer adalah :
-Volatile (informasi ada selama komputer bekerja. Ketika komputer dipadamkan, informasi
yang tersimpan juga hilang)
-Berkecepatan tinggi
-Akses random
2) Secondary Memory
Dipergunakan untuk menyimpan data atau program biner secara permanen. Contoh memori
sekunder adalah floppy, harddisk, CD ROM, magnetic tape, dll. Karakteristik dari memori
sekunder adalah
-Non volatile atau persisten
-Kecepatan relatif rendah (dibandingkan memori primer)
-akses random

• Alat Input dan Output

Alat input dan output, merupakan alat perangkat keras yang berfungsi sebagai penghubung
antara komputer dengan lingkungan luarnya. Dapat dibagi menjadi dua kelompok, yaitu :
a) Input Device
Berfungsi sebagai perangkap keras untuk memasukan data dari luar sistem ke dalam sistem
komputer. Beberapa contoh Input Device :
 -Keyboard
-Mouse
-Touch screen
-Scanner
-Camera
b) Output Device
Berfungsi sebagai perangkat keras untuk menampilkan data dari system komputer dalam
bentuk teks, suara, gambar, dan media lainnya. Beberapa contoh Output Device :
-Monitor
-Printer
-Speaker
-Plotter

SOFTWARE

merupakan program-program komputer yang berguna untuk memerintakan hardeware melakukan

suatu pekerjaan sesuai dengan yang dikehendaki pengguna. Program tersebut ditulis dengan bahasa
khusus yang dimengerti oleh komputer. Software terdiri dari berbagai jenis, yaitu :
• Sistem Operasi
Sistem Operasi adalah software yang berfungsi untuk mengaktifkan seluruh perangkat yang
terpasang pada komputer sehingga masing masing dapat saling berkomunikasi. Tampa ada
sistem operasi maka komputer tidak dapat difungsikan sama sekali. Contoh sistem operasi
seperti Windows, Linux, DOS, Unix dan Novell
• Program Utility
program utility berfungsi untuk membantu atau mengisi kekurangan atau kelemahan sistem
operasi, misalnya PC Tools dapat melakukan perintah format sebagaimana DOS, tapi PC
Tools mampu memberikan keterangan dan animasi yang bagus dalam proses pemformatan.
Contoh program utility seperti Antivirus, File Management, PC Tools, Scandisk dan Norton
Utility.
• Program Aplikasi
program aplikasi merupakan program yang khusus melakukan suatu pekerjaan tertentu.
Contonya seperti program gaji pada suatu perusahaan, maka program tersebut hanya
digunakan oleh bagian keuangan saja tidak dapat digunakan oleh departemen yang lain.
Umumnya program aplikasi ini dibuat oleh seorang programmer komputer sesuai dengan
permintaan atau kebutuhan seseorang/lembaga/perusahaan guna keperluan interennya.
• Program Paket
program paket merupakan program yang dikembangkan untuk kebutuhan umum, seperti :
- pengolahan kata atau editor naskah : MS Word, LibreOffice Writer, Word Perfect, dan
Wordstar
- pengolahan angka atau lembar kerja : Lotus123, MS Excell, LibreOffice Calc, dan
QuattroPro
- Presentasi : MS PowerPoint
- desain grafis : CorelDraw, PhotoShop
• Compiler
komputer hanya memahami satu bahasa, yaitu bahasa mesin. Sedangkan bahasa mesin
terdiri dari nilai 0 dan 1. sangat tidak praktis dan efisien bagi manusia untuk membuat
program yang terdiri dari nilai 0 dan 1, maka dicarilah suatu cara untuk menerjemakan
sebuah bahasa yang di pahami oleh manusia menjadi bahasa mesin. Dengan tujuan inilah,
diciptakan program compiler.
Cara kerja komputer
Komputer menerima data melalui unit input berdasarkan instruksi yang diberikan dan setelah
menerima segala bentuk input dari pengguna dan kemudian menyimpan semua data ke RAM.
Kemudian CPU akan mengambil data dari RAM dan memprosesnya dengan instruksi yang
ditentukan dan memberikan sinyal ke komponen lain melalui BUS dan ketika data sudah siap,
data tersebut akan dikirim kembali melalui perangkat output (output device).
Jenis Komputer :
beberapa jenis komputer yang paling umum:
1) Personal Computers(PC): Personal Computer adalah jenis komputer yang paling umum,
dirancang untuk penggunaan individu. Mereka biasanya digunakan untuk tugas-tugas seperti
menjelajahi internet, membuat dan mengedit dokumen, bermain game, dan hiburan. PC hadir
dalam berbagai bentuk, seperti desktop, laptop, dan komputer.
2) Workstation: Workstation adalah komputer kelas atas yang dirancang untuk penggunaan
profesional, seperti di bidang teknik, arsitektur, atau desain grafis. Mereka memiliki CPU
yang kuat, RAM dalam jumlah besar, dan kartu grafis kelas atas untuk menjalankan perangkat
lunak khusus.
3) Server: Server adalah komputer yang menyediakan layanan ke komputer lain, seperti
menyimpan file, mengelola jaringan, atau hosting situs web. Mereka dirancang untuk kinerja
tinggi, keandalan, dan keamanan dan biasanya digunakan oleh bisnis dan organisasi.
4) Mainframe Computer: Komputer mainframe adalah komputer besar dan kuat yang
dirancang untuk memproses data dalam jumlah besar dan mendukung banyak pengguna
secara bersamaan. Mereka biasanya digunakan oleh organisasi besar, lembaga pemerintah,
atau lembaga keuangan untuk tugas-tugas seperti pemrosesan data, pemrosesan transaksi, atau
manajemen basis data.
5) Supercomputer: Superkomputer adalah komputer paling kuat dan mahal di dunia, dirancang
untuk melakukan perhitungan dan simulasi yang rumit. Mereka biasanya digunakan dalam
penelitian ilmiah, prakiraan cuaca, atau aplikasi militer.
6) Emberedded System: Emberedded System adalah komputer yang dibangun ke perangkat
lain, seperti mobil, peralatan, atau peralatan medis. Mereka dirancang untuk tujuan tertentu
dan seringkali tidak terlihat oleh pengguna.
7) Smartphone dan Tablet: Smartphone dan tablet adalah komputer portabel berukuran kecil
yang dirancang untuk penggunaan seluler. Mereka biasanya memiliki layar sentuh, dan
perangkat lunaknya dioptimalkan untuk aplikasi seluler.
8) Konsol Game: konsol game adalah computer khusus yang dirancang untuk memainkan vidio
game. Mereka biasanya memiliki grafis yang kuat dan pengontrol pemainan khusus.
2) Belajar Algoritma dan Representasi

3) Apa itu web developer?

Web developer adalah programmer yang bertugas membuat dan mengembangkan website. Web
developer itu di bagi menjadi tiga frofesi atau pengembang, tergantung cakupan illmu atau skill
yang ingin di kuasai.
 Front-End Developer
Pengembang front-end adalah orang yang mendesain dan menjaga atarmuka pengguna agar
website memiliki tampilan yang lebih baik dan muda digunakan pengunjung. Gajinya rata
rata di Negara kita yaitu kurang lebih 4 sampai 7 juta per bulan.
 Back-End Developer
Pengembang back-end adalah orang yang bekerja di server dan mengelola data. Mereka
bertanggung jawab untuk memastikan akses website selalu cepat, aman dan berfungsi.
Gajinya rata tata di Negara kita yaitu kurang lebih 8 sampai 11 juta perbulan untuk junior
dan 11 sampai 46 juta perbulan, untuk senior.
 Full-stack Developer
Web developer yang bisa melakukan pekerjaan front-end atau back-end sekaligus. Tentang
gajinya tidak perlu di tanyakan lagi ya, sudah pasti besar hehehee..
4) HTML
Mungkin hampir semua website yang ada saat ini, itu dibuat atau dirancang menggunakan bahasa
html, lalu apa itu html ?.
HTML adalah singkatan dari Hyper Text Markup Language, dan merupakan bahasa yang dibuat
untuk pemformatan halaman web dengan bantuan berbagai tag yang tersedia.
HTML pertama kali dibuat oleh Tim Berners-Lee pada tahun 1989, dan versi terbaru sekarang di
kenal dengan HTML 5. Untuk sejarah atau pengertihan yang lebih lengkap mengenai html kalian
bisa mencari sendiri di internet.
Oh, iya ?, ada dua Hal yang wajib kalian siapkan sebelum memulai belajar html, yang pertama
aplikasi teks editor dan yang kedua alat peramban internet. Fungsi teks editor yaitu untuk menulis
program komputer atau mengedit code code bahasa pemrograman apapun, contohnya teks editor
seperti: Visual Studio Code, Sublime Text, Notepad ++. Sedangkan alat peramban itu digunakan
untuk menampilkan hasil program yang sudah di buat, contoh alat peramban yang sering digunakan
seperti: google chrome, browser, opera, firefox, safari, mozila (dianjurkan memiliki semuanya,
dikarenakan keluaran setiap alat peramban itu berbeda beda).
Kalau kalian sudah memiliki aplikasinya, maka kita langsung saja belajar sama sama tentang
HTML.
Mengapa belajar HTML?
Mempelajari HTML adalah suatu KEHARUSAN bagi pelajar dan pekerja profesional untuk
menjadi Insinyur Perangkat Lunak yang hebat khususnya ketika mereka bekerja di Domain
Pengembangan Web. Saya akan mencantumkan beberapa keuntungan utama belajar HTML:
•Membuat situs Web - Anda dapat membuat situs web atau menyesuaikan template web
yang ada, jika Anda memahami HTML dengan baik.
•Menjadi seorang desainer web - Jika Anda ingin memulai karir sebagai desainer web
profesional (Front-End) , mendesain HTML dan CSS adalah keterampilan yang harus
dimiliki.
•Memahami web - Jika Anda ingin mengoptimalkan situs web Anda, untuk meningkatkan
kecepatan dan kinerjanya, ada baiknya mengetahui HTML untuk mendapatkan hasil terbaik.
•Memahami hahasa pemrograman - Setelah Anda memahami dasar HTML maka
teknologi terkait lainnya seperti javascript, php, atau angular menjadi lebih mudah untuk
dipahami.

Membuat Hello World dengan HTML

Kita akan membuat program kecil, yaitu tuliasan Hello World pada HTML. Tulislah code dibawah
ini pada pada aplikasi teks editor kalian. Ingat jangan copy paste, supaya kalian terbiasa menulis
code pemrograman dan bisa mengatasi error jika ada tulisan kalian yang salah.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
setelah kalian menulis code di atas, tetap di teks editor kalian kemuadian klik kanan pada mouse
jika ada tukisan open in browser maka kalian klik. Jika tidak ada jangan kawatir kalian bisa pergi
ke forder tempat kalian menyimpan file (jika belum disimpan maka tekan CTRL+S dan beri nama
file html kalian dengan ekstensi .html contonya index.html atau hallo.html) lau cari file html kalian
dan klik kanan lalu sorotkan kusor mouse kalian pada Open With dan klik alat peramban yang
ingin kalian gunakan untuk menampilkan code html, hore sekarang kalian sudah bisa membuat
sebuah Web.

5) CSS
6) JavaScript
Ok, setelah kita mengenal HTML dan CSS. Maka kita lanjut mempelajari salah satu bahasa
pemrograman, yaitu JavaScript. Oh iya, perlu di ingat HTML dan CSS itu bukan bahasa
pemrograman, mereka hanya sebuah bahasa untuk merancang dan menghias sebuah web saja.
Agar lebih afdol sebelum belajar JavaScript, kita belajar sejaranya terlebih dahulu. JavaScript
dibangun dalam waktu singkat sekali, mungkin sekitar satu mingguh saja oleh Brandan Eich,
seorang karyawan Netscape, pada bulan September 1995. JavaScript mengalami bebera perubahan
nama, dari pertama di buat bernama ‘Mocha’ lalu beruba menjadi ‘Mona’ dan keudian berubah lagi
menjadi ‘LiveScript’ sebelum akhirnya resmi menyandang nama ‘JavaScript’.
Sebenarnya pada tahun 1998, JavaScript resmi diberi nama ECMAScript, setelah Netscape
menyerakan JavaScript ke ECMA. Dikarenakan untuk menarget audience yang kebanyakan pada
saat itu adalah programmer Java maka tetap di beri nama JavaScript.
1) Membuat “Hello word”
Sudah menjadi tradisi atau kebiasaan sebelum mempelajari sebuah bahasa pemrograman itu
membuat tulisan ‘Hello word’ terlebih dahulu pada code pertamanya, lalu menampilkannya
pada alat peramban seperti browser.