💻

Materi Interaktif Web Development

Belajar HTML, CSS, JavaScript, PHP & MySQL dengan Hands-on Practice

Progress Keseluruhan 0%

📄 HTML - HyperText Markup Language

Progress

HTML adalah bahasa markup untuk membuat struktur halaman web.

<!DOCTYPE html>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Elemen-elemen penting dalam HTML:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>Ini adalah paragraf.</p>

Form untuk input data dari user:

<label for="email">Email:</label>

<button type="submit">Kirim</button>

</form>

🚀 HTML Playground

Output:

📝 HTML Quiz

1. Tag HTML mana yang digunakan untuk membuat heading terbesar?

🎨 CSS - Cascading Style Sheets

Progress

CSS digunakan untuk styling dan layout halaman web.

/* CSS Selector */

h1 {

color: blue;

font-size: 24px;

}

.class-name {

background-color: #f0f0f0;

padding: 10px;

}

#id-name {

margin: 20px auto;

}

Flexbox untuk layout yang fleksibel:

.container {

display: flex;

justify-content: center;

align-items: center;

gap: 20px;

}

.item {

flex: 1;

padding: 15px;

background: #e3f2fd;

}

Media queries untuk responsive design:

/* Mobile First */

.container {

width: 100%;

padding: 10px;

}

/* Tablet */

@media (min-width: 768px) {

.container {

max-width: 750px;

margin: 0 auto;

}

🚀 CSS Playground

Output:

📝 CSS Quiz

1. Property CSS mana yang digunakan untuk mengatur layout flexbox?

display: flex flex: 1 flexbox: true

⚡ JavaScript - Programming Language

Progress

JavaScript untuk interaktivitas dan logika aplikasi.

// Variables

let name = 'John';

const age = 25;

var isActive = true;

// Functions

function greet(name) {

return `Hello, ${name}!`;

}

// Arrow Function

const add = (a, b) => a + b;

Manipulasi elemen HTML dengan JavaScript:

// Select Elements

const element = document.getElementById('myId');

const elements = document.querySelectorAll('.myClass');

// Modify Content

element.innerHTML = 'New Content';

element.style.color = 'red';

// Event Listeners

element.addEventListener('click', function() {

alert('Clicked!');

});

Handling asynchronous operations:

// Fetch API

async function fetchData() {

try {

const response = await fetch('api/data');

const data = await response.json();

return data;

} catch (error) {

console.error(error);

}

🚀 JavaScript Playground

Output:

Counter Demo

📝 JavaScript Quiz

1. Cara yang benar untuk mendeklarasikan variabel yang tidak bisa diubah?

const let var

🐘 PHP - Server-Side Programming

Progress

PHP adalah bahasa server-side untuk web development.

<?php

// Variables

$name = 'John';

$age = 25;

$isActive = true;

// Output

echo "Hello, " . $name;

print_r($age);

// Arrays

$fruits = ['apple', 'banana', 'orange'];

Functions dan OOP dalam PHP:

<?php

// Function

function calculateArea($width, $height) {

return $width * $height;

}

// Class

class User {

private $name;

public function __construct($name) {

$this->name = $name;

}

Koneksi PHP ke MySQL database:

<?php

// Database Connection

$host = 'localhost';

$dbname = 'mydb';

$username = 'root';

$password = '';

try {

$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

echo "Connected successfully";

} catch(PDOException $e) {

echo "Connection failed: " . $e->getMessage();

}

🚀 PHP Code Examples

<?php
// Simple PHP Calculator
function calculate($num1, $num2, $operation) {
    switch($operation) {
        case '+':
            return $num1 + $num2;
        case '-':
            return $num1 - $num2;
        case '*':
            return $num1 * $num2;
        case '/':
            return $num2 != 0 ? $num1 / $num2 : 'Error: Division by zero';
        default:
            return 'Invalid operation';
    }
}

// Example usage
echo calculate(10, 5, '+'); // Output: 15
echo calculate(10, 5, '/'); // Output: 2
?>

PHP Output Simulation:

Klik "Lihat Output" untuk melihat hasil PHP

📝 PHP Quiz

1. Bagaimana cara yang benar untuk memulai kode PHP?

<?php <php> <?>

🗄️ MySQL - Database Management

Progress

SQL commands untuk database operations.

-- Create Database

CREATE DATABASE myapp;

-- Create Table

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100) NOT NULL,

email VARCHAR(100) UNIQUE,

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

Create, Read, Update, Delete operations:

-- INSERT (Create)

INSERT INTO users (name, email)

VALUES ('John Doe', 'john@example.com');

-- SELECT (Read)

SELECT * FROM users;

SELECT name, email FROM users WHERE id = 1;

-- UPDATE

UPDATE users SET email = 'newemail@example.com' WHERE id = 1;

-- DELETE

DELETE FROM users WHERE id = 1;

Menggabungkan data dari multiple tables:

-- INNER JOIN

SELECT u.name, p.title

FROM users u

INNER JOIN posts p ON u.id = p.user_id;

-- LEFT JOIN

SELECT u.name, COUNT(p.id) as post_count

FROM users u

LEFT JOIN posts p ON u.id = p.user_id

GROUP BY u.id;

🚀 SQL Query Builder

SELECT * FROM users;

Query Result:

Build query untuk melihat hasil

📝 MySQL Quiz

1. SQL command mana yang digunakan untuk mengambil data dari database?

SELECT GET FETCH

🚀 Final Project Challenge

Buat aplikasi web sederhana menggunakan semua teknologi yang telah dipelajari!

📝 To-Do List App

CRUD operations dengan PHP & MySQL

👤 User Registration

Form validation dengan JavaScript

📊 Dashboard

Responsive design dengan CSS

Materi Interaktif Web Development

📄 HTML - HyperText Markup Language

1. HTML Basics

2. HTML Elements

3. HTML Forms

🚀 HTML Playground

📝 HTML Quiz

🎨 CSS - Cascading Style Sheets

1. CSS Basics

2. Flexbox Layout

3. Responsive Design

🚀 CSS Playground

📝 CSS Quiz

⚡ JavaScript - Programming Language

1. JavaScript Basics

2. DOM Manipulation

3. Async/Await

🚀 JavaScript Playground

Counter Demo

📝 JavaScript Quiz

🐘 PHP - Server-Side Programming

1. PHP Basics

2. Functions & Classes

3. Database Connection

🚀 PHP Code Examples

📝 PHP Quiz

🗄️ MySQL - Database Management

1. SQL Basics

2. CRUD Operations

3. Joins & Relations

🚀 SQL Query Builder

📝 MySQL Quiz

🚀 Final Project Challenge

📝 To-Do List App

👤 User Registration

📊 Dashboard