FOTO
MODUL I PENGENALAN WEB
Dika Satria (2110631160007)
Asisten: Resi Sujiwo Bijokangko & Mukhlis Maulana Al-Fakih
Tanggal Percobaan: 26/10/2022
TLE61619- APLIKASI PEMOGRAMAN KOMPUTER
Laboratorium Dasar Teknik Elektro – Fakultas Teknik Unsika
Abstrak
Perkembangan teknologi informasi terutama
internet, merupakan faktor utama pendorong
perkembangan industry 5.0. Web adalah salah satu
aplikasi yang berisikan dokumen-dokumen
multimedia (teks, gambar, suara, animasi, video) di
dalamnya yang menggunakan protokol HTTP
(Hypertext Transfer Protocol) dan untuk
mengaksesnya menggunakan perangkat lunak
yang disebut browser. Pada praktikum pertama ini
kegiatan yang dilakukan yaitu melakukan
percobaan pada modul 1 tentang pengenalan web.
Pada percobaan ini dilakukan dengan
menggunakan aplikasi Visual Studio Code sebagai
kode editor dan Xampp sebagai server nya untuk
menjalankan kode yang kita buat di Visual Studio
Code. Pada pertemuan pertama ini kita membuat
sebuah tabel menggunakan html.
Kata kunci: Web, Html, Xaamp, pengenalanweb
1. PENDAHULUAN
Web merupakan dokumen yang ditulis dalam
format HTML (Hyper Text Markup Language),
yang hampir selalu bisa diakses melalui http, yaitu
protokol yang menyampaikan informasi dari
server untuk ditampilkan kepada para pemakai
melalui web browser. Semua publikasi dari web
tersebut dapat membentuk sebuah jaringan
informasi yang sangat besar yang dapat diakses
dengan menggunakan internet. [1].
Web memerlukan beberapa komponen untuk
terbangunnya sebuah web. Web memerlukan
komponen seperti Bahasa program, web editor,
web browser, web server, database server, image
editor.
Berdasarkan teknologi, web terbagi menjadi 2
jenis, yaitu web statis dan web dinamis. Web statis
dan web dinamis memiliki kesamaan yaitu
menampilkan halaman web di internet yang
memuat suatu informasi. Web statis adalah web
dimana penggunanya tidak dapat mengubah
website secara langsung melalui browser. Jadi web
statis ini dapat diubah secara manual saja.
Sedangkan web dinamis adalah situs web yang
kontennya dapat diperbaharui secara berkala
dengan mudah. [2]
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA
Pada praktikum modul kedua ini, praktikan
akan membahas tentang pengenalan web yang
bertujuan sebagai pemahaman mengenai cara
menginstall visual studio code dan xammp dan
memahami pembuatan tabel menggunakan HTML.
2. STUDI PUSTAKA
2.1 KONSEP DASAR WEB
Web merupakan dokumen yang ditulis dalam
format HTML (Hyper Text Markup Language),
yang hampir selalu bisa diakses melalui http, yaitu
protokol yang menyampaikan informasi dari
server untuk ditampilkan kepada para pemakai
melalui web browser. Semua publikasi dari web
tersebut dapat membentuk sebuah jaringan
informasi yang sangat besar yang dapat diakses
dengan menggunakan internet. [1].
Saat ini membangun web ada banyak caranya,
setidaknya ada tiga metode cara membuat web
yaitu menggunakan CMS, Website builder dan
menulis kode pemrograman sendiri (coding). Pada
web memerkukan memerlukan beberapa
komponen untuk terbangunnya sebuah web. Web
memerlukan komponen seperti Bahasa program,
web editor, web browser, web server, database
server, image editor.
Berdasarkan teknologi, web terbagi menjadi 2
jenis, yaitu web statis dan web dinamis. Web statis
dan web dinamis memiliki kesamaan yaitu
menampilkan halaman web di internet yang
memuat suatu informasi. Web statis adalah web
dimana penggunanya tidak dapat mengubah
website secara langsung melalui browser. Jadi web
statis ini dapat diubah secara manual saja.
Sedangkan web dinamis adalah situs web yang
kontennya dapat diperbaharui secara berkala
dengan mudah. [2]
2.2 HTML
Hypertext Markup Language (HTML)
merupakan implementasi dari konsep hypertext ke
dokumen atau naskah, yang digunakan untuk
membuat sebuah website. HTML dibuat oleh Tim
Berners – Lee dan mengalami perkembangan sejak
tahun 1990. Saat ini HTML menjadi standar
1
internet yang dikendalikan dan didefinisikan
penggunaanya oleh W3C ( World Wide Web
Consortium). Dalam perkembangan HTML,
dilakukan penambahan kemampuan dan fasilitas
yang lebih baik dibandingkan dengan versi
sebelumnya.
Html terdapat beberapa versi diantara lain
Htlm version 1.0, Html version 2.0, html version 3.0,
html version 3.2, html version 4.0, html version 4.01,
html version 5.0. [3]
2.3 VISUAL STUDIO CODE
Gambar 2.1 Interface Vsc
Visual Studio Code adalah Sofware yang
sangat ringan, namun kuat editor kode sumbernya
yang berjalan dari desktop. Muncul dengan built-
in dukungan untuk JavaScript, naskah dan Node.js
dan memiliki array beragam ekstensi yang tersedia
untuk bahasa lain, termasuk C ++, C # , Python,
dan PHP. Hal ini didasarkan sekitar Github ini
Elektron, yang merupakan versi cross-platform
dari Atom komponen kode-editing, berdasarkan
JavaScript dan HTML5. Editor ini adalah fitur
lengkap lingkungan pengembangan terpadu (IDE)
dirancang untuk pengembang yang bekerja
dengan teknologi cloud yang terbuka Microsoft.
Visual Studio Code menggunakan open source
NET perkakas untuk memberikan dukungan
untuk ASP.NET C # kode, membangun alat
pengembang Omnisharp NET dan compiler Roslyn.
Antarmuka yang mudah untuk bekerja dengan,
karena didasarkan pada gaya explorer umum,
dengan panel di sebelah kiri, yang menunjukkan
semua file dan folder Anda memiliki akses ke panel
editor di sebelah kanan, yang menunjukkan isi dari
file yang telah dibuka. Dalam hal ini, editor telah
dikembangkan dengan baik, dan menyenangkan
pada mata. Ia juga memiliki fungsi yang baik,
dengan intellisense dan autocomplete bekerja
dengan baik untuk JSON, CSS, HTML, {kurang},
dan Node.js [3].
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA
2.4 XAMPP
Gambar 2.2 Interface XAMMP
Dalam pembangunan sebuah website pastinya
setiap programmer memerlukan bantuan web
server untuk mengkoneksikan file-file website ke
basis data. Beberapa web server yang sering
digunakan diantaranya: Apache Web Server, Sun
Java System Web Server, Xampp Server,Wamp
server, Xitami Web Server, dan sebagainya. Dalam
hal ini, penulis menggunakan Xampp Server dalam
membangun web tersebut [4].
XAMPP merupakan suatu paket instalasi
Apache, PHP, dan MySQL”. Dengan aplikasi ini,
anda dapat langsung melakukan instalasi Apache,
PHP, dan MySQL sekaligus Aplikasi XAMPP ini
dapat diperoleh cukup dengan melakukan
download [4].
3. METODOLOGI
Gambar 3.1 Metodologi Laporan
• Mulai
Pada tahap ini praktikan memulai praktikum
Mulai dari menyiapkan folder untuk
menyimpan file, mempersiapkan komputer,
Modul praktikum dan BCL untuk membuat
laporan analisis dan kehjadian saat praktikum.
• Percobaan 1- Visual studio Code dan Xaamp
Pada tahap percobaan 1 praktikan melakukan
percobaan Menginstall Visual studio Code dan
Xaamp
Visual studio code
a. Kunjungi situs Download Visual Studio
Code pada laman
https://code.visualstudio.com/download.
Kemudian pilih instalasi yang sesuai
dengan Sistem operasi dan arsitektur
perangkat praktikan.
2
 f. Ceklis semua opsi dan klik Next

Gambar 3.2 Install Vsc 1

b. Setelah selesai download maka klik dua

kali file instalasinya.
c. Klik "I accept the agreement" dan klik Next. Gambar. 3.6 Install Vsc 5
g. Klik install

Gambar. 3.3 Install Vsc 2

d. Klik Next
Gambar. 3.7 Install Vsc 6
h. Tunggu proses instalasi hingga selesai

Gambar. 3.4. Install Vsc 3

e. Klik Next
Gambar. 3.8 Install Vsc 7
i. Klik finish
Install Xampp
a. Download XAMPP terbaru melalui
website Apache Friends pada laman
berikut:https://www.apachefriends.org/i
ndex.html

Gambar. 3.5 Install Vsc 4

Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA 3

 Gambar 3.9 Install Xampp 1

b. Lakukan instalasi setelah Anda selesai

mengunduh. Selama proses instalasi
mungkin Anda akan melihat pesan yang
menanyakan apakah Anda yakin akan
menginstalnya. Silakan tekan Yes untuk
melanjutkan instalasi dan klik next
Gambar 3.12 Install Xampp 4
e. Pada halaman selanjutnya, akan ada
pilihan apakah Anda ingin menginstal
Bitnami untuk XAMPP, dimana nantinya
dapat Anda gunakan untuk install
WordPress, Drupal, dan Joomla secara
otomatis.

Gambar 3.10 Install Xampp 2

c. Pada tampilan selanjutnya akan muncul

pilihan mengenai komponen mana dari Gambar 3.13 Install Xampp 5
XAMPP yang ingin dan tidak ingin Anda
f. Install, next dan finish
instal. Beberapa pilihan seperti Apache dan
PHP adalah bagian penting untuk
menjalankan website dan akan otomatis
diinstal. Silakan centang MySQL dan
phpMyAdmin, untuk pilihan lainnya
biarkan saja

Gambar 3.14 Install Xampp 6

g. Silakan buka aplikasi XAMPP kemudian

klik tombol Start pada Apache dan MySQL.
Jika berhasil dijalankan, Apache dan
MySQL akan berwarna hijau seperti
gambar di bawah ini.
Gambar 3.11 Install Xampp 3

d. Berikutnya silakan pilih folder tujuan

dimana XAMPP ingin Anda instal.
Contohnya di direktori C:\xampp

Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA 4

 denganmodul praktikum. Setelah melakukan step-
step dengan baik dan teliti, kedua aplikasi sudah
bisa digunakan untuk membuat sesuatu project.
Visual Studio Code dan Xampp akan menjadi
wadah untuk membuat atau mengembangkan web.
Dengan Visual Studio Code sebagai kode editornya
dan Xampp sebagai servernya.

4.2 PERCOBAAN 2
Gambar 3.15 Install Xampp 7

• Percobaan 2- Membuat table menggunakan

HTML
Pada tahap percobaan 2 praktikan membuat
tabel menggunakan program html
menggunakan Vsc dan menggunakan Xampp
sebagai server untuk ditampilkan pada
browser.
• Selesai
Gambar 4.3 Tampilan program
Pada tahap ini semua hasil pekerjaan
diselesaikan, praktikan merapikan alat tulis
dan peralatan yang telah digunakan
sebelumnya.

4. HASIL DAN ANALISIS

Bagian ini berisi data hasil percobaan 1 sampai 3:

4.1 PERCOBAAN 1

Gambar 4.4 Tampilan web

Analisis :
Tahap pertama penulis membuka text editor
visual studio code dan membuat folder project yang
akan dibuat. Setelah membuat folder selanjutnya
penulis membuat file untuk menulis program yang
dibuat seperti pada gambar 4.2. pada penulisan project
harus mengetik secara teliti untuk menhindari
Gambar 4.1 Hasil install Vsc program error karena salah dalam mengetik
syntax.Pada percobaan kedua ini penulis
menggunakan fungsi-fungsi sebagai berikut :
• Tag <body> merupakan bagian dari struktur
dasar HTML, dengan atribut style
bgcolor=”#228B22” membuat warna
background menjadi warna sesuai kode
warna.
• Tag <h1> itu untuk membuat judul, da dengan
style align = “center” membuat judul itu
menjadi rata tengah.
• Tag <hr> membuat garis dengan ukuran 5
(satuannya px) dan lebar 50%, menggunakan
style color=”#000000” untuk mengubah
Gambar 4.2 Hasil Install Xampp warna garis sesuai kode warna.
• Tag <table> adalah tag membuat tabel dengan
Analisis : menggunakan atribut border berukuran 1
Pada percobaan 1, praktikan melakukan installasi (satuannya px) dan lebar 70%, menggunakan
style bgcolor=”#00BFFF” untuk mengubah
Visual studio code dan xammp sesuai
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA 5
 warna background sesuai kode warna. Labolatorium dasar teknik elektro,
• Tag <tr> itu bagian dari struktur table untuk Universitas Singaperbangsa
membuat row/ baris pada table. Karawang.
• Tag <td> bagian dari untuk membuat kolom.
Setelah membuat program selanjutnya mengaktifkan
xampp untuk membuat server supaya tabel yang ingin
dibuat dapat ditampilkan di web seperti gambar.

5. KESIMPULAN
Dari semua percobaan yang telah dilakukan
dalam modul pengenalan web, praktikan dapat
mengenal, memahami dan dapat menggunakan
program visual studio code dan xaamp dengan
baik dan benar.
Pada modul 1 praktikan dapat membuat tabel
menggunakan program HTML, mengetahui fungsi
Xaamp dan Visual studio code.

DAFTAR PUSTAKA
[1] N, Andi. (2021, 21 januari). Pengertian WWW
(World Wide Web) Lengkap dan
Fungsinya. Diakses dari : Pengertian
WWW (World Wide Web) Lengkap
dan Fungsinya (qwords.com)
[2] Management.(None).Ketahuilah perbedaan
web statis dan dinamis. Diakses
dari : Ketahui Perbedaan Web Statis
dan Web Dinamis - Herco Digital
[3] None. Bab II Landasan Teori Web. Diakses
dari : http://repository.ittelkom-
pwt.ac.id/6381/7/BAB%20II.pdf
[4] None, Bab II Landasan Teori Web. Diakses
dari :https://repository.bsi.ac.id/in
dex.php/unduh/item/67418/File_
10-Bab-II-Landasan-Teori.pdf
[5] P, Dana dkk.(2015). RANCANG BANGUN
WEBSITE JURNAL ILMIAH
BIDANG KOMPUTER (STUDI
KASUS : PROGRAM STUDI ILMU
KOMPUTER UNIVERSITAS
MULAWARMAN. Diakses 19
Oktober 2022 tersedia :
https://fmipa.unmul.ac.id/files/do
cs/25-
29%20RANCANG%20BANGUN
%20WEBSITE%20JURNAL%20I
LMIAH.pdf
[6] S, Eriga(2022). Jenis Website di Internet
Berdasarkan Fungsi, Platform dan
Sifat. Diakses dari :
https://www.exabytes.co.id/blog/j
enis-website-di-internet/
[7] Unsika.(2022).Modul Aplikasi program
komputer dengan PHP.

Laporan Praktikum - Laboratorium Dasar Teknik Elektro – FT UNSIKA 6