Pelajari Web Development Lengkap: Dari React hingga MySQL!

1. Pengantar Web Development

Web Development adalah proses pembuatan website atau aplikasi web yang dapat diakses melalui internet. Web development terbagi menjadi dua bagian utama: Frontend (bagian yang dilihat pengguna) dan Backend (bagian server dan database).

Dalam ebook ini, kita akan belajar mulai dari dasar HTML, CSS, JavaScript, hingga framework React untuk frontend, dan Node.js dengan Express serta MySQL untuk backend dan database.

Ilustrasi diagram yang menunjukkan hubungan antara frontend dan backend dalam web development, dengan ikon komputer dan server

2. HTML dan CSS Dasar

2.1 Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web.

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Contoh HTML</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

2.2 Apa itu CSS?

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan layout halaman web.

h1 {
  color: blue;
  font-family: 'Arial', sans-serif;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

2.3 Step by Step Membuat Halaman Web Sederhana

Buat file index.html dan tulis struktur HTML dasar.
Tambahkan elemen heading dan paragraf.
Buat file style.css dan tambahkan aturan CSS untuk mempercantik tampilan.
Hubungkan style.css ke index.html dengan tag <link> di dalam <head> .
Buka file index.html di browser untuk melihat hasilnya.

Tampilan halaman web sederhana dengan judul biru dan paragraf hitam di latar putih

3. JavaScript Dasar

3.1 Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif.

3.2 Contoh Script JavaScript Sederhana

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>JavaScript Dasar</title>
  </head>
  <body>
    <h1 id="judul">Halo Dunia!</h1>
    <button onclick="ubahJudul()">Ubah Judul</button>

    <script>
      function ubahJudul() {
        document.getElementById('judul').textContent = 'Judul Telah Diubah!';
      }
    </script>
  </body>
</html>

3.3 Step by Step Membuat Interaksi

Buat elemen HTML yang ingin diubah, misal heading dengan id.
Buat tombol dengan event onclick yang memanggil fungsi JavaScript.
Tulis fungsi JavaScript untuk mengubah konten elemen tersebut.
Buka file di browser dan coba klik tombol untuk melihat perubahan.

Tampilan halaman web dengan tombol dan judul yang berubah saat tombol diklik

4. React.js - Membuat Aplikasi Interaktif

4.1 Apa itu React?

React adalah library JavaScript untuk membangun antarmuka pengguna (UI) yang interaktif dan efisien menggunakan komponen.

4.2 Contoh Komponen React Sederhana

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

4.3 Step by Step Membuat Aplikasi React

Install Node.js dan npm (Node Package Manager) di komputer Anda.
Buka terminal dan jalankan npx create-react-app nama-aplikasi untuk membuat project React baru.
Buka folder project dan jalankan npm start untuk menjalankan aplikasi di browser.
Buat komponen React di dalam folder src dan gunakan useState untuk state management sederhana.
Modifikasi App.js untuk menampilkan komponen yang dibuat.

Tampilan aplikasi React dengan tombol dan angka counter yang bertambah saat tombol diklik

5. Node.js dan Express - Backend Development

5.1 Apa itu Node.js dan Express?

Node.js adalah runtime JavaScript yang berjalan di server. Express adalah framework minimalis untuk membuat server web dengan Node.js.

5.2 Contoh Server Express Sederhana

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Halo dari server Express!');
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

5.3 Step by Step Membuat Server Express

Install Node.js dan npm jika belum terpasang.
Buat folder project baru dan jalankan npm init -y untuk membuat package.json .
Install Express dengan perintah npm install express .
Buat file index.js dan tulis kode server Express seperti contoh di atas.
Jalankan server dengan perintah node index.js dan buka http://localhost:3000 di browser.

Ilustrasi server Node.js dan Express dengan ikon server dan kode

6. MySQL - Database Relasional

6.1 Apa itu MySQL?

MySQL adalah sistem manajemen basis data relasional yang banyak digunakan untuk menyimpan data aplikasi web.

6.2 Contoh Query MySQL Dasar

CREATE DATABASE webapp;

USE webapp;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO users (username, email) VALUES ('budi', 'budi@example.com');

SELECT * FROM users;

6.3 Step by Step Menggunakan MySQL

Install MySQL Server di komputer Anda.
Buka MySQL Command Line atau gunakan aplikasi GUI seperti MySQL Workbench.
Buat database dan tabel sesuai kebutuhan aplikasi.
Gunakan query SQL untuk memasukkan, mengubah, dan mengambil data.
Integrasikan MySQL dengan backend Node.js menggunakan package mysql2 atau sequelize .

Ilustrasi database MySQL dengan tabel dan query SQL di layar komputer

7. Project Akhir: Fullstack Web App

Sekarang kita akan menggabungkan semua yang telah dipelajari untuk membuat aplikasi web fullstack sederhana: aplikasi daftar tugas (To-Do List).

7.1 Frontend dengan React

Buat komponen React untuk menampilkan daftar tugas, form input tugas baru, dan tombol hapus tugas.

import React, { useState, useEffect } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');

  useEffect(() => {
    fetch('/api/todos')
      .then(res => res.json())
      .then(data => setTodos(data));
  }, []);

  const addTodo = () => {
    fetch('/api/todos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ task }),
    })
      .then(res => res.json())
      .then(newTodo => setTodos([...todos, newTodo]));
    setTask('');
  };

  const deleteTodo = (id) => {
    fetch(`/api/todos/${id}`, { method: 'DELETE' })
      .then(() => setTodos(todos.filter(todo => todo.id !== id)));
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <input
        type="text"
        value={task}
        onChange={e => setTask(e.target.value)}
        placeholder="Tambah tugas baru"
      />
      <button onClick={addTodo}>Tambah</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.task}
            <button onClick={() => deleteTodo(todo.id)}>Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

7.2 Backend dengan Node.js dan Express

Buat server Express yang menyediakan API untuk mengambil, menambah, dan menghapus tugas dari database MySQL.

const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
const port = 3000;

app.use(express.json());

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'webapp',
});

app.get('/api/todos', async (req, res) => {
  const [rows] = await pool.query('SELECT * FROM todos');
  res.json(rows);
});

app.post('/api/todos', async (req, res) => {
  const { task } = req.body;
  const [result] = await pool.query('INSERT INTO todos (task) VALUES (?)', [task]);
  res.json({ id: result.insertId, task });
});

app.delete('/api/todos/:id', async (req, res) => {
  const { id } = req.params;
  await pool.query('DELETE FROM todos WHERE id = ?', [id]);
  res.sendStatus(204);
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

7.3 Struktur Tabel MySQL

CREATE TABLE todos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  task VARCHAR(255) NOT NULL
);

Ilustrasi aplikasi fullstack to-do list dengan frontend React dan backend Node.js MySQL

8. Sumber Belajar dan Channel Rekomendasi

React Official Documentation
Dokumentasi resmi React untuk belajar komponen, hooks, dan ekosistem React.
Node.js Official Documentation
Dokumentasi lengkap Node.js untuk belajar runtime JavaScript di server.
Express.js Official Documentation
Dokumentasi framework Express untuk membuat server web dengan mudah.
MySQL Official Documentation
Dokumentasi MySQL untuk belajar query dan manajemen database relasional.
Channel YouTube Academind
Channel pembelajaran web development lengkap dari React, Node.js, hingga database.
Channel YouTube Traversy Media
Video tutorial lengkap dan mudah dipahami untuk berbagai teknologi web.
freeCodeCamp
Platform belajar coding gratis dengan banyak kursus web development.