1. Mengaktifkan Web Server Menggunakan XAMPP

00:10:59
https://www.youtube.com/watch?v=yjd1RynFjIU

Ringkasan

TLDRVideo ini memberikan panduan langkah demi langkah untuk membuat website sederhana menggunakan HTML dan aplikasi XAMPP. Pembicara menjelaskan cara menginstal XAMPP, mengaktifkan web server, dan mengaksesnya melalui browser. Dia juga menunjukkan cara membuat folder untuk proyek web dan file index.html yang diperlukan untuk menampilkan konten. Selain itu, dia menekankan pentingnya menampilkan ekstensi file di Windows agar file disimpan dengan benar sebagai HTML.

Takeaways

  • 🖥️ Memulai proyek web sederhana menggunakan HTML.
  • 📦 Menginstal dan menjalankan aplikasi XAMPP.
  • 🌐 Mengakses web server lokal melalui browser.
  • 📁 Menyimpan file website di folder 'htdocs'.
  • 📄 Membuat file index.html sebagai file utama.
  • 🔍 Menampilkan ekstensi file di Windows.
  • 🚀 Menguji server lokal tanpa koneksi internet.
  • 📂 Membuat folder baru untuk proyek web.
  • 🛠️ Menggunakan Google Chrome untuk mengakses localhost.
  • 📋 Memahami pentingnya pengaturan file dalam pengembangan web.

Garis waktu

  • 00:00:00 - 00:05:00

    Pada bahagian pertama, pengenalan tentang projek pembuatan laman web menggunakan HTML diperkenalkan. Penekanan diberikan kepada keperluan untuk menjalankan pelayan web menggunakan aplikasi XAMPP, yang membolehkan pengguna mengaktifkan pelayan web di komputer mereka. Pengguna juga diajar cara mengakses pelayan web melalui pelayar dengan menggunakan alamat 'localhost' atau '127.0.0.1'.

  • 00:05:00 - 00:10:59

    Bahagian kedua menerangkan cara membuat folder baru untuk laman web dalam direktori 'htdocs' di dalam XAMPP. Pengguna diberi panduan untuk mencipta fail 'index.html' sebagai fail utama laman web. Terdapat juga penjelasan tentang cara memastikan sambungan fail yang betul dan cara mengubah tetapan Windows untuk menunjukkan sambungan fail. Akhirnya, pengguna diajar cara menguji laman web yang telah dibuat.

Peta Pikiran

Video Tanya Jawab

  • Apa itu XAMPP?

    XAMPP adalah aplikasi yang digunakan untuk mengaktifkan web server di laptop.

  • Bagaimana cara mengakses web server lokal?

    Anda dapat mengakses web server lokal melalui alamat 127.0.0.1 atau localhost di browser.

  • Di mana saya harus menyimpan file website saya?

    File website harus disimpan di folder 'htdocs' dalam direktori instalasi XAMPP.

  • Apa itu file index.html?

    File index.html adalah file utama yang diakses ketika membuka website.

  • Bagaimana cara menampilkan ekstensi file di Windows?

    Anda dapat menampilkan ekstensi file dengan mengubah pengaturan di opsi 'View' di Windows Explorer.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
id
Gulir Otomatis:
  • 00:00:00
    [Musik]
  • 00:00:05
    Bismillahirrahmanirrahim Baiklah Pada
  • 00:00:07
    kesempatan ini saya akan mencoba kita
  • 00:00:10
    akan mencoba memulai sebuah e project
  • 00:00:12
    sederhana kita yaitu membuat sebuah web
  • 00:00:16
    dengan berbasis html jadi kita fokus ke
  • 00:00:19
    html dulu dengan menggunakan nanti
  • 00:00:21
    beberapa
  • 00:00:22
    template-template sehingga tampilan web
  • 00:00:24
    kita
  • 00:00:25
    ee lebih bagus dan juga nanti kita
  • 00:00:29
    usahakan kan e pembahasan di playlist
  • 00:00:31
    ini kita mencoba sampai mempostingnya di
  • 00:00:34
    eh web server yang online ya Nah bahas
  • 00:00:38
    tentang web server sebelum kita membuat
  • 00:00:41
    atau memulh sebuah coding kita
  • 00:00:42
    menggunakan HTML kita harus menjalankan
  • 00:00:45
    sebuah web server Nah di sini di laptop
  • 00:00:49
    saya sudah jalan sebuah aplikasi namanya
  • 00:00:51
    exam PP control panel Nah di sini Saya
  • 00:00:54
    punya versi 3,3 jadi di sini e
  • 00:00:58
    teman-teman yang masih belum pun nya
  • 00:01:00
    aplikasi ini silakan diinstal jadi apa
  • 00:01:02
    gunanya aplikasi Ini aplikasi ini
  • 00:01:05
    digunakan untuk mengaktifkan ee web
  • 00:01:08
    server di laptop kita ya jadi ketika
  • 00:01:10
    kita ingin membuat sebuah web otomatis
  • 00:01:12
    kita harus punya yang namanya web server
  • 00:01:14
    Ya seperti yang kita ketahui di server
  • 00:01:17
    harus punya web server dan di klien
  • 00:01:20
    harus punya sebuah web browser Nah di
  • 00:01:22
    sini laptop kita sekalian jadi klien
  • 00:01:25
    juga sekalian menjadi sebuah server
  • 00:01:27
    karena kita akan membuat sebuah
  • 00:01:30
    web baiklah jika sudah diinstal
  • 00:01:33
    aplikasinya kita boleh start jadi yang
  • 00:01:36
    modul yang kita butuhkan sekarang adalah
  • 00:01:38
    sebuah modul yang namanya apace jadi
  • 00:01:40
    kita start nah jika start seperti ini
  • 00:01:43
    kita terlebih dahulu harus testing
  • 00:01:46
    apakah e betul-betul server di
  • 00:01:49
    eh laptop kita itu berjalan dengan baik
  • 00:01:53
    baiklah caranya itu adalah silakan buka
  • 00:01:55
    browser jadi browser apapun mau Google
  • 00:01:58
    Chrome add ke atau Mozilla Terserah dari
  • 00:02:02
    eh pengguna Saya di sini menggunakan
  • 00:02:05
    Google
  • 00:02:06
    Chrome nah seperti ini defaultnya Google
  • 00:02:09
    Chrome nah Kebetulan saya terakses
  • 00:02:11
    internet nah ini sebenarnya kalau tidak
  • 00:02:15
    ada internet pun local host harus
  • 00:02:18
    jalan Ini saya contohkan Google sendiri
  • 00:02:21
    di sini saya disconnect dulu ya ini
  • 00:02:24
    disconnect no internet nah ketika kita
  • 00:02:27
    mengaktifkan tadi local host ini
  • 00:02:30
    otomatis tanpa internet pun kita dapat
  • 00:02:31
    mengakses sebuah server di laptopnya
  • 00:02:33
    kita nah alamat servernya itu sebenarnya
  • 00:02:39
    127.0.0.1 nah 0 0.1 nah ini ya jika kita
  • 00:02:45
    enter maka harusnya tampil sebuah
  • 00:02:50
    dashboard nah dashboard seperti ini ya
  • 00:02:54
    menjelaskan bahwa kita mengaktifkan
  • 00:02:56
    sebuah eh local host atau mengaktifkan
  • 00:02:59
    sebuah web web serveram apaceah di sini
  • 00:03:02
    ya Jadi ada e keterangan-keterangannya
  • 00:03:05
    di sini boleh
  • 00:03:07
    dibaca Selain Kita akses lewat 127001
  • 00:03:12
    ini kita bisa Tuliskan local host jadi
  • 00:03:14
    dia sudah bisa diakses menggunakan
  • 00:03:17
    tulisan local host enter maka
  • 00:03:19
    tampilannya
  • 00:03:20
    sama ya tampilannya sama ini cuman agak
  • 00:03:24
    besar saya reset
  • 00:03:25
    duluah seperti ini tampilannya sama
  • 00:03:29
    persis jadi nanti boleh diakses lewat
  • 00:03:32
    127001 lewat IP ataukah yang sudah Ee
  • 00:03:35
    terdns seperti ini local host jadi boleh
  • 00:03:38
    diakses lewat dua tempat tersebut Nah
  • 00:03:41
    selanjutnya yang kita harus tahu bahwa
  • 00:03:44
    di server kita ini sudah jalan sebuah
  • 00:03:47
    server makanya kita harus ee mengetahui
  • 00:03:50
    Di mana letak server itu ketika kita
  • 00:03:52
    membuat web di mana kita Letakkan web
  • 00:03:55
    tersebut nah letak web tersebut itu ada
  • 00:03:58
    di sini jadi kita buka Windows explore
  • 00:04:00
    kemudian kita masuk di local disk C Jadi
  • 00:04:04
    sebenarnya lokal eh posisinya ini
  • 00:04:06
    tergantung di mana anda menginstal e
  • 00:04:08
    aplikasi exam-nya kalau diinstal di C
  • 00:04:10
    default-nya di C maka kita bisa buka C
  • 00:04:13
    kemudian ada folder
  • 00:04:15
    exam ya nanti di sini Sebenarnya banyak
  • 00:04:18
    fitur tapi kita akan fokus ke tempat di
  • 00:04:20
    mana website itu beradaah website itu
  • 00:04:23
    adanya di sini HT doc nah di folder
  • 00:04:27
    inilah Ee Kita akan mengelola web kita
  • 00:04:30
    Nah di sini Saya punya beberapa
  • 00:04:32
    sebenarnya sudah ada beberapa web yang
  • 00:04:36
    saya buat tapi di sini e kita bisa
  • 00:04:39
    membuat sebuah e web baru ya contohnya
  • 00:04:43
    seperti ini jadi caranya untuk membuat
  • 00:04:45
    sebuah web baru kita hanya sisa membuat
  • 00:04:48
    sebuah new folder misalkan new folder
  • 00:04:51
    seperti ini misalkan web saya web saya
  • 00:04:55
    atau belajar web Ya
  • 00:04:58
    belajar HT hml saja belajar html boleh
  • 00:05:02
    ya terserah jadi ini ee penamaannya
  • 00:05:05
    Terserah dari ee user kalau kita punya
  • 00:05:09
    project misalkan
  • 00:05:10
    eh kedai copi silakan tulis kedai copi
  • 00:05:14
    kalau kita misalkan punya sebuah proyek
  • 00:05:17
    misalkan Sistem Informasi apa informasi
  • 00:05:20
    barang misalkan silakan Tulis namanya
  • 00:05:21
    sistem informasi barang Nah di sini saya
  • 00:05:24
    tulis saja belajar html nah jika kita
  • 00:05:28
    mengakses ee ini maka di sini k bisa
  • 00:05:32
    mengaksesnya lewat
  • 00:05:34
    localhost/bajar
  • 00:05:36
    html meskipun foldernya masih seperti
  • 00:05:39
    ini Ya intinya ini sudah bisa diakses
  • 00:05:41
    belajar html jadi kalau kita ketikkan
  • 00:05:44
    sembarang misalkan copy tidak ada ya not
  • 00:05:47
    font tapi kalau kita ketikkan yang sudah
  • 00:05:49
    ada foldernya tadi
  • 00:05:51
    belajar belajar html Nah sudah ada ya
  • 00:05:55
    ini sudah ada tampilan Nah perlu
  • 00:05:58
    diketahui bahwa ketika kita membuat
  • 00:06:01
    sebuah aplikasi Hal pertama yang akan
  • 00:06:04
    diakses Itu adalah sebuah namanya file
  • 00:06:08
    index.htmlah meskipun ada juga index.php
  • 00:06:11
    tapi di sini karena kita belajar html
  • 00:06:13
    maka kita buat file index.html terlebih
  • 00:06:16
    dahulu Nah kalau kita buat caranya buat
  • 00:06:19
    itu new kemudian boleh kita tekt
  • 00:06:23
    dokumen perhatikan di sini ada file
  • 00:06:27
    ekstensi di belakangnya Nah kalau kita
  • 00:06:30
    buat dari txt maka maka ekstensinya
  • 00:06:33
    adalah txt Nah kita mauubah jadi
  • 00:06:36
    tulisannya nanti adalah indek.html
  • 00:06:40
    enter yes maka tampilannya Oh sori
  • 00:06:48
    html nah seperti ini tampilannya ada
  • 00:06:51
    seperti ini sudah menjadi bentuk Google
  • 00:06:54
    Chrome sesuai dengan browser default-nya
  • 00:06:56
    kita kebetulan di laptop saya browser
  • 00:06:58
    default yang saya adalah Google Chrome
  • 00:07:00
    maka tampilannya seperti ini di sini
  • 00:07:02
    juga tampil ya bahwa e html dokumen dia
  • 00:07:07
    berbentuk sebuah html dokumen maka
  • 00:07:10
    ketika seperti ini maka tampilannya akan
  • 00:07:12
    diakses oleh web-nya kita jadi kita
  • 00:07:15
    kembali ke browser kita coba
  • 00:07:17
    enter ya sudah tampil seperti ini ya
  • 00:07:20
    layar kosong ya karena memang isinya
  • 00:07:23
    tadi ini belum ada ya ini belum ada
  • 00:07:27
    Intinya kita sudah punya sebuah ee
  • 00:07:30
    tampilan yang siap kita isi dengan
  • 00:07:35
    ee program html nantinya ya seperti itu
  • 00:07:40
    Nah di sini juga saya mau Jelaskan
  • 00:07:42
    sedikit bahwa kita bisa mengatur karena
  • 00:07:44
    biasanya komputer itu secara default
  • 00:07:47
    untuk ekstensi di belakangnya Ini tidak
  • 00:07:50
    muncul ya untuk ekstensi di belakangnya
  • 00:07:53
    ini biasanya tidak muncul Nah kita bisa
  • 00:07:54
    atur agar ee muncul terlebih dahulu ya
  • 00:07:58
    boleh klik option jadi di Windows Explor
  • 00:08:01
    Kebetulan saya menggunakan Windows 11
  • 00:08:03
    jadi untuk Windows yang lain silakan
  • 00:08:04
    menyesuaikan saja Intinya kita masuk di
  • 00:08:07
    option ya kemudian nanti ada di Tab view
  • 00:08:13
    nanti silakan buka heat extension for no
  • 00:08:16
    file system file tipe Sorry file tipe
  • 00:08:19
    artinya apa Eh jangan e sembunyikan eh
  • 00:08:24
    ekstensinya Jadi kalau ini tampil karena
  • 00:08:26
    defaultnya pasti ini tercentang ya saya
  • 00:08:29
    coba e seperti ini biasanya default-nya
  • 00:08:31
    e kalau kita tulis default-nya Misalkan
  • 00:08:35
    index.html seperti ini maka ini
  • 00:08:37
    sebenarnya nanti e ekstensinya bukan
  • 00:08:40
    yang ini ya tapi
  • 00:08:42
    eh yang di belakangnya lagi ya Jadi ini
  • 00:08:46
    defaultnya seperti ini jadi pastikan
  • 00:08:49
    anda membuat sebuah ekstensi Contohnya
  • 00:08:52
    seperti ini ya saya bandingkan saja
  • 00:08:54
    misalkan saya buat lagi tadi Seperti
  • 00:08:56
    yang tadi Nah ini saya Tuliskan misalkan
  • 00:08:59
    eh
  • 00:09:01
    about
  • 00:09:06
    about.html nah beda ya beda beda
  • 00:09:10
    formatnya Ketika saya tidak Tampilkan eh
  • 00:09:14
    file tipenya n jadi kita tampilkan dulu
  • 00:09:16
    saya ulangi untuk Tampilkan itu ada di
  • 00:09:19
    option sini option kemudian cari tab
  • 00:09:22
    view kemudian buka centangan di
  • 00:09:26
    eh hide extension jadi klik apply
  • 00:09:30
    kemudian Oke Nah di sini bisa kita lihat
  • 00:09:32
    ternyata yang tadi yang kita buat ini
  • 00:09:34
    ekstensinya memang txt jadi Tidak
  • 00:09:36
    berbentuk html jadi kalau kita mau buat
  • 00:09:38
    eh merubah ekstensinya sisa hapus saja
  • 00:09:41
    tekt-nya pastikan D html ini menjadi eh
  • 00:09:45
    paling belakang agar dia menjadi sebuah
  • 00:09:47
    file html kita enter yes nah seperti
  • 00:09:53
    ini seperti ini kalau kita buka di sini
  • 00:09:56
    di browser kita bisa tulisnya seperti
  • 00:09:58
    ini about
  • 00:10:00
    .html kita enter Nah kalau Blank seperti
  • 00:10:03
    ini artinya tidak ada error ya Nah kita
  • 00:10:05
    coba kalau misalkan yang lain misalkan
  • 00:10:07
    eh apa ya misalkan
  • 00:10:11
    info.html ini kan kita tidak punya
  • 00:10:12
    file-nya Nah kalau kita tulis seperti
  • 00:10:14
    ini error ya not font artinya apa ketika
  • 00:10:18
    kita menulis sesuatu yang sudah ada
  • 00:10:20
    misalkan tadi index.html
  • 00:10:24
    enter nah ini tidak ada error artinya
  • 00:10:27
    ini worded ya ini berfungsi
  • 00:10:29
    ya Artinya kita sudah menjalankan sebuah
  • 00:10:32
    yang namanya
  • 00:10:34
    ee web browser sor
  • 00:10:37
    eh apa lagi namanya web server ya web
  • 00:10:41
    server dengan menggunakan sebuah
  • 00:10:43
    aplikasi
  • 00:10:44
    exam ya untuk e video pertama ini saya
  • 00:10:47
    kira Cukup sekian untuk pengantar
  • 00:10:49
    tentang bagaimana aplikasi exam ini
  • 00:10:52
    terima kasih
Tags
  • HTML
  • XAMPP
  • Web Server
  • localhost
  • index.html
  • Web Development
  • Tutorial
  • Web Design
  • File Management
  • Browser