BAB I

PENDAHULUAN

A. Latar Belakang Masalah

Java Web Application adalah sebuah aplikasi web yang dibangun
menggunakan bahasa pemrograman Java. Aplikasi web ini biasanya
menggunakan teknologi seperti Servlets, JSP (JavaServer Pages), dan framework
seperti Spring, Struts, dan Hibernate.
Java Web Application sangat populer karena dapat berjalan pada berbagai
platform, seperti Windows, Linux, dan MacOS. Selain itu, bahasa pemrograman
Java juga dikenal karena keamanannya, portabilitas, dan fleksibilitasnya.
Java Web Application sering digunakan untuk mengembangkan aplikasi e-
commerce, sistem manajemen konten, aplikasi perbankan, dan aplikasi bisnis
lainnya yang memerlukan pemrosesan yang cepat, interaksi yang aman dan dapat
diandalkan dengan pengguna, dan kemampuan untuk mengelola data secara
efektif.

B. Rumusan Masalah
Berdasarkan pembatasan masalah di atas, maka dapat dirumuskan
masalah sebagai berikut :
1. Apa itu java?
2. Apa itu HTML?
3. Bagaimana pengembangan java web?

C. Tujuan Penulisan Makalah

Makalah ini dibuat untuk menyelesaikan salah satu tugas pada mata
kuliah Pemerograman lanjut dan juga untuk menjelaskan kepada pembaca
mengenai Java web aplikasi (html).

1
D. Manfaat Penulisan Makalah
Setelah makalah ini selesai, kami berharap makalah ini dapat
bermanfaat bagi semua pihak untuk dapat lebih memahami mengenai Java
web aplikasi (html).

E. Metode Penulisan Makalah

Metode penulisan yang penyusun pilih adalah metode kajian pustaka
yang berarti mempelajari dengan mengumpulkan data yang bersumber dari
buku, jurnal, serta informasi yang berasal dari internet.

F. Sistematika Penulisan Makalah

Makalah ini terdiri dari 3 bab. Materi buku ini disusun dengan
sistematika sebagai berikut:
BAB I Pendahuluan yang didalamnya terdapat latar belakang masalah,
identifikasi masalah, pembatasan masalah, rumusan masalah, tujuan
penulisan makalah, manfaat penulisan makalah, metode penulisan makalah,
serta sistematika penulisan makalah.
BAB II yang terdiri dari pembahasan materi yaitu. (1) Apa yang dimaksud
dengan kompone teknologi informasi dan komunikasi (2) Apa saja Aplikasi
teknologi informasi dan komunikasi
BAB III Penutup berisi kesimpulan dan saran.

2
 BAB II

PEMBAHASAN

A. Java
Java dikenal dengan moto “Write Once, Run Anywhere” yang memiliki
arti bahwa Java adalah bahasa pemrograman yang mampu dijalankan di
berbagai platform tanpa perlu penyesuaian ulang di platformnya. Contohnya,
dapat dijalankan di Android, Linux, Windows, dan lain-lain.
Alasan kenapa Java dapat dijalankan di mana saja, karena bahasa
pemrograman ini memiliki sistem syntax atau kode pemrograman level
tertinggi. Syntax akan disusun dengan Java Virtual Machine (JVM) menjadi
kode numeric (bytescode) platform, sehingga aplikasi Java dapat dijalankan di
berbagai perangkat.
Singkatnya, Java adalah sebuah bahasa pemrograman. Biasanya
digunakan untuk pengembangan bagian back-end dari software, aplikasi
Android, dan juga website. Java juga memiliki fleksibilitas, sehingga telah
dijalankan di 13 miliar perangkat. Contoh aplikasi yang menggunakan Java
adalah Netflix, Spotify, hingga Twitter.
Adapun komponen penting dalam Java adalah seperti berikut:
1. JVM
Pertama, komponen dari Java adalah JVM atau Java Virtual Machine.
JVM ini bisa dibilang sebagai jantung dari bahasa pemrograman Java. Artinya,
saat menjalankan program Java, maka JVM memiliki tugas untuk mengonversi
bytecode menjadi sebuah kode yang lebih spesifik lagi.
2. JDK
Java Development Kit atau JDK adalah komponen utama dari Java. JDK
memberikan semua tools, binaries, executables yang dibutuhkan untuk

3
menyusun dan mengeksekusi program Java.
3. JRE
Terakhir, komponen Java adalah JRE atau Java Runtime Environment. JRE
ini merupakan implementasi dari JVM, yang mana menyediakan platform untuk
melakukan eksekusi program-program Java.

Cara Kerja Java

Penasaran bagaimana cara menulis kode yang dibutuhkan untuk penulisan
bahasa pemrograman? Biasanya, bahasa pemrograman ditulis pada Text Editor.
Untuk MacOS bisa menggunakan TextEdit dan Windows menggunakan
Notepad. Setelah menulis kode pada text editor, kamu bisa menyimpan program
Java yang sudah ditulis dengan format “.java”.
Kemudian, program yang kamu tulis tersebut tidak dapat langsung
dieksekusi, melainkan harus diterjemahkan terlebih dahulu. Umumnya, yang
bertugas untuk menerjemahkan kode yang sudah ditulis tadi adalah Java
Compiler.
Java Compiler akan menerjemahkan kode tersebut menjadi sebuah file yang
bernama Java-Bytecode dan memiliki format “.class”. Setelah diterjemahkan
dan berformat “.class”, maka program tersebut baru bisa dibaca dan dijalankan
oleh Java Virtual Machine atau JVM.
Namun sekarang tidak perlu melakukan itu dikarenakan sudah ada text
editor yang memiliki java compiler seperti Eclipse, NetBeans, IntelliJ IDEA,
Visual studio, Sublime, dan masih banyak lagi.

B. HTML
HTML adalah bahasa standar pemrogaman yang digunakan untuk
membuat halaman website, yang diakses melalui internet. Singkatan dari
"Hypertext Markup Language" atau "bahasa markup".
HTML merupakan bahasa markup standar untuk membuat dan
menyusun halaman pada aplikasi website. HTML disusun berdasar kode dan
simbol tertentu, yang dimasukkan dalam sebuah file atau dokumen. Sehingga

4
bisa ditampilkan pada layar komputer. Dan bisa dipahami oleh para pengguna
internet.
Ada tiga komponen utama yang membentuk HTML, yaitu tag, elemen,
dan atribut. Ketiga komponen ini akan sering kamu temukan saat mempelajari
hingga menggunakan HTML. Berikut pengertiannya.
1. Tag
Tag pada HTML berarti penanda awal dan akhiran dari sebuah
elemen, inilah yang disebut “markup”. Bagian ini berguna sebagai
perintah atau instruksi yang dibaca oleh browser. Ada dua jenis tag yang
perlu kamu perhatikan, yaitu tag dengan penutup seperti <p> … </p>,
<body> … </body>, atau <title> … </title> dan tag tanpa penutup
seperti <link>, <br>, <img>, atau <hr>.

2. Attribute
Atribut merupakan informasi tambahan dalam sebuah tag. Tidak
semua tag memiliki atribut, namun beberapa tag wajib memerlukan
atribut agar dapat bekerja, misalnya <a>, <img>, atau <video>. Atribut
bisa kamu temui dalam contoh berikut
Gambar 2. 1 attribute

3. Elemen (Element)
Elemen adalah bagian yang lebih luas dari tag. Sebab, elemen berisi
keseluruhan tag, mulai dari tag pembuka (<>), isi hingga penutup tag
(</>) dan atribut yang melengkapi. Tapi jangan lupa, tidak semua tag
memiliki penutup, maka perhatikan kembali jenis kodenya saat kamu
mengidentifikasi sebuah elemen HTML.
Gambar 2. 2 elemen

5
 Jenis-jenis tags HTML

• Tag HTML Membuat Judul

No Nama Tag Fungsi
1 <h1> s/d <h6> Membuat judul atau heading
2 <hr> Memisahkan konten (biasanya ditampilkan
garis pembatas)
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

6
</body>
</html>

Preview :

• Tag HTML untuk Membuat Paragraf

No Nama Tag Fungsi
1 <p> Membuat paragraf
2 <br> Membuat garis baru
3 <pre> Memfortmat teks atau kalimat
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>

<br> example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>

7
</html>

Preview :

• Tag Style
No Nama Tag Fungsi
1 style Atribut untuk elemen styling pada HTML
2 background- Memberikan warna latar belakang
color
3 color Memberi warna pada teks
4 font-family Mengubah font pada teks
5 font-size Mengatur ukuran font
6 text-align Mengatura perataan teks
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

Preview :

8
 • Tag Formating
No Nama Tag Fungsi
1 <b> Membuat teks tebal
2 <strong> Membuat teks penting
3 <i> Membuat teks miring
4 <em> Membuat teks ditekankan
5 <mark> Membuat teks ditandai
6 <small> Membuat teks kecil
7 <del> Teks dihapus
8 <ins> Teks dimasukan
9 <sub> Teks subscript
10 <sup> Teks superscript
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is_subscript and ^superscript</p>

</body>
</html>

Preview :

9
 • Tag Gambar
No Nama Tag Fungsi
1 <img> Elemen untuk mendefinisikan gambar
2 src Atribut untuk menentukan URL gambar
3 alt Mendefinisikan teks pada gambar, jika
gambar tidak dapat ditampilkan
4 width – height Menentukan ukuran gambar
5 float Properti untuk float image pada CSS
6 <map> Mendefinisikan gambar peta
7 <area> Mendefinisikan area atau daerah-daerah
gambar pada peta
8 <picture> Menampilkan gambar yang berbeda untuk
perangkat yang berbeda
Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who
cannot see the image gets an understanding of what the image
contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="300"

height="300">

10
</body>
</html>

Preview :

• Tag Form
No Nama Tag Fungsi
1 <form> Membuat formulir untuk mengumpulkan
input pengguna
2 <input> Membuat tipe inputan pada form yang akan
dibuat
3 <textare> Elemen untuk mendefinisikan field input
4 <label> Memberikan label pada elemen input
5 <fieldset> Mengelompokan elemen yang terdapat pada
sebuah form
6 <select> Membuat input dengan pilihan yang

11
 berbentuk list drop down
7 <optgroup> Mengelompokan beberapa pilihan pada
daftar pilihan input
8 <option> Mendefinisikan opsi yang bisa dipilih
9 <button> Membuat Button
10 <datalist> Membuat daftar pilihan untuk input data
11 <output> Menampilkan hasil dari hitungan

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an
input element.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and

earlier).</p>
</body>
</html>

Preview :

12
 • Tag Tabel
No Nama Tag Fungsi
1 <table> Membuat tabel pada web
2 <tr> Membuat baris pada tabel
3 <td> Membuat kolom pada tabel
4 <th> Membuat judul pada kolom. Contohnya
nama, kelas, dan alamat.
5 <caption> Membuat judul tabel
6 border Mengatur garis tabel
7 border-collapse Mengatur batas garis tabel
8 padding Mengatur padding pada cell
9 text-align Mengatur perataan pada konten tabel
10 border-spacing Mengatur jarak spasi garis tabel
11 colspan Menggabungkan beberapa kolom. Kalau di
office disebutnya Merge Cell
12 rowspan Menggabungkan beberapa baris
13 id Memberikan id pada tabel atau kolom
Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {

13
 border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>

14
 </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Preview :

• Tag Daftar/ List

No Nama Tag Fungsi
1 <ul> Untuk membuat tampilan daftar
menggunakan simbol seperti bullet, cyrcle,
dan lainnya.
2 <ol> Membuat daftar menggunakan nomor,
huruf, romawi, dan lainnya
3 <li> Menentukan berbagai item yang ingin
ditampilkan
4 <dl> Mendefinisikan daftar deskripsi
5 <dt> Mendefinisikan istilah deskripsi
6 <dd> Menggambarkan istilah dalam daftar

15
 deskripsi
7 <type> Menentukan jenis penomoran

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Preview :

 Jenis-jenis Atribut HTML

16
Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan
pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa
ditambahkan ke semua elemen.
Berikut ini jenis-jenis atribut yang harus diketahui:
1. Atribut Global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen
HTML.
Berikut ini daftar atribut global dan fungsinya:
Nama Atribut Deskripsi atau fungsi
accesskey Menentukan tombol shortcut untuk mengaktifkan atau
fokus pada elemen
class Menentukan class CSS yang akan digunakan
contenteditable Menentukan isi elemen bisa diedit atau tidak
data-* Digunakan untuk menyimpan data
dir Menentukan arah teks dari elemen (kiri ke kanan atau
sebaliknya)
draggable Menentukan apakah elemen bisa di drag atau tidak
hidden untuk menyembunyikan elemen
id Menentukan id unik untuk elemen
lang Menentukan bahasa yang digunakan untuk isi elemen
spellcheck Menentukan apakah isi elemen harus dilakukan
pengejaan grammer atau tudak
style Menentukan inline CSS untuk elemen
tabindex Menentukan urutan atau indeks tab dari elemen (saat
tombol tab ditekan)
title Menentukan informasi tambahan tentang elemen
translate Menentukan apakah konten dari elemen bisa
diterjemahkan atau tidak
2. Atribut Event
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan
dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak

17
digunakan pada pemrograman Javascript.
Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:
Nama atribut Nilai Fungsi: Menjalankan script
onafterprint kode javascript setelah dokumen dicetak
onbeforeprint kode javascript sebelum dokumen dicetak
onbeforeunload kode javascript sebelum saat dokumen tidak ter-
load
onerror kode javascript saat terjadi error
onhashchange kode javascript saat terjadi perubahan pada bagian
anchor di URL
onload kode javascript setelah loading selesai
onmessage kode javascript saat ada pesan
onoffline kode javascript saat tiba-tiba offline
ononline kode javascript saat tiba-tiba online
onpagehide kode javascript saat user tidak sedang membuka
halaman web
onpageshow kode javascript saat user membuka kembali
halaman web
onpopstate kode javascript saat history browser berubah
onresize kode javascript saat ukuran jendela browser
berubah
onstorage kode javascript saat area penyimpanan (Web
Storage) di-update
onunload kode javascript saat web browser ditutup
Selain atribut tersebut, masih banyak lagi atribut event yang lainnya. Semuanya
bisa kamu lihat di: HTML Event Attributes.
3. Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan
kadang atribut ini tidak bisa digunakan pada elemen yang lain.
Contoh:
Nama atribut Bisa dipakai di tag

18
 src <audio>, <embed>, <iframe>, <img>, dll
href <a>, <link>
action <form>
autoplay <audio>, <video>

 Kerangka Dasar HTML

Agar dapat belajar membentuk sebuah halaman web, HTML
memerlukan suatu kerangka. Selain dapat mempermudah browser membaca
perintahmu, kerangka ini juga bisa membantu kamu mengisi dan mendesain
website-mu sesuai keinginan.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Kerangka dasar ini merupakan gabungan dari tag, elemen, dan atribut
yang telah dijelaskan tadi. Setidaknya ada lima kerangka dasar atau inti yang
sering digunakan saat belajar HTML, yaitu:
<!DOCTYPE html>
Berfungsi untuk mendeklarasikan kepada komputer, tipe dokumen dan
kode perintah yang hendak dibuat, yaitu HTML.
<html> … </html>
Tag yang satu ini wajib ada untuk membuat dokumen HTML, karena
digunakan sebagai penanda bahwa kamu akan memulai dan mengakhiri
dokumen menggunakan kode HTML. Bila perlu, kamu bisa menambahkan
atribut “lang=” untuk memilih bahasa yang digunakan, seperti “en” untuk
bahasa Inggris atau “id” untuk bahasa Indonesia.

19
<head> … </head>
Kamu bisa menggunakan tag ini untuk mengisi metadata yang berfungsi
pula untuk SEO, seperti deskripsi, judul, kode CSS atau Javascript, dan
sebagainya.

<title> … <title>
Title atau judul biasanya muncul di dalam <head>, tag ini berguna untuk
menambahkan judul halaman web yang akan ditampilkan di tab browser.
<body> … </body>
Di sinilah kontenmu ditempatkan. Kamu bisa menambahkan beberapa tag
yang sering digunakan, seperti <p> … </p> untuk membuat paragraf atau <h1>
sampai <h6> untuk menambahkan heading.

C. Java Web Aplikasi

Java adalah salah satu bahasa pemrograman yang paling banyak
digunakan untuk mengembangkan aplikasi web dinamis. Aplikasi web adalah
perangkat lunak komputer yang menggunakan browser web dan teknologi
untuk melakukan tugas melalui internet. Aplikasi web disebarkan di server web.
Java menyediakan beberapa teknologi seperti Servlet dan JSP yang
memungkinkan kita mengembangkan dan menerapkan aplikasi web di server
dengan mudah. Ini juga menyediakan beberapa kerangka kerja seperti Spring,
Spring Boot yang menyederhanakan pekerjaan dan menyediakan cara yang
efisien untuk mengembangkan aplikasi web. Mereka mengurangi upaya
pengembang.

20
 Kita dapat membuat situs web menggunakan halaman HTML statis dan
menatanya menggunakan CSS , tetapi kita membutuhkan teknologi sisi server
saat ingin membuat situs web dinamis.
Pada bagian ini, kita akan melihat cara membuat situs web
menggunakan Java Servlets dan HTML. Selanjutnya, kita akan melihat
bagaimana teknologi ini berguna untuk mengembangkan aplikasi web.

 Apa itu Aplikasi web

Aplikasi web adalah perangkat lunak komputer yang dapat diakses

menggunakan browser web apa pun. Biasanya, frontend sebuah aplikasi web
dibuat menggunakan bahasa scripting seperti HTML, CSS, dan JavaScript, yang
didukung oleh hampir semua web browser. Sebaliknya, backend dibuat oleh salah
satu bahasa pemrograman seperti Java, Python, Php, dll., dan database. Berbeda
dengan aplikasi seluler, tidak ada alat khusus untuk mengembangkan aplikasi web
dengan itu kita dapat menggunakan salah satu IDE yang didukung untuk
mengembangkan aplikasi web.

 Web Server dan Client

Server web adalah proses yang menangani permintaan client dan
merespons. Ini memproses permintaan yang dibuat oleh klien dengan
menggunakan protokol terkait. Fungsi utama server web adalah untuk
menyimpan permintaan dan menanggapinya dengan halaman web. Ini adalah
media antara client dan server. Misalnya, Apache adalah server web terkemuka.
Client adalah perangkat lunak yang memungkinkan pengguna untuk
meminta dan membantu mereka dalam berkomunikasi dengan server. Browser
web adalah client dalam aplikasi web; beberapa klien terkemuka adalah Google
Chrome, Firefox, Safari, Internet Explorer, dll.

 HTML dan HTTP

HTML adalah singkatan dari Hyper Text Markup Language, merupakan
bahasa umum untuk komunikasi Server Web dan Klien Web. Karena server

21
 web dan klien web adalah dua komponen perangkat lunak web yang berbeda,
kami memerlukan bahasa yang berkomunikasi di antara keduanya.
HTTP adalah singkatan dari HyperText Transfer Protocol, merupakan
protokol komunikasi antara klien dan server. Ini berjalan di atas protokol
TCP/IP.
Beberapa komponen integral dari Permintaan HTTP adalah sebagai berikut:
1. Metode HTTP: Metode HTTP mendefinisikan tindakan yang akan
dilakukan; biasanya, mereka adalah GET, POST, PUT, dll.
2. URL: URL adalah alamat web yang ditentukan saat
mengembangkan aplikasi web. Ini digunakan untuk mengakses
halaman web.
3. Parameter Bentuk: Parameter bentuk seperti argumen dalam metode
Java. Itu diteruskan untuk memberikan detail seperti pengguna,
detail kata sandi pada halaman login.
 URL
URL adalah singkatan dari Universal Resource Locator yang digunakan
untuk mencari server dan sumber daya. Ini adalah alamat halaman web. Setiap
halaman web pada proyek harus memiliki nama yang unik.
URL terlihat seperti berikut:

1. http: //localhost:8080/SimpleWebApplication/

 http atau https: Ini adalah titik awal dari URL yang menentukan protokol
yang akan digunakan untuk komunikasi.
 Localhost: Localhost adalah alamat server. Saat kita menjalankan aplikasi
kita secara lokal, itu disebut localhost; jika kami menyebarkan proyek kami
melalui web, maka itu diakses dengan menggunakan nama domain seperti
"javatpoint.com". Nama domain memetakan server ke alamat IP.
 8080: Ini adalah nomor port untuk server lokal; itu opsional dan mungkin
berbeda di mesin yang berbeda. Jika kami tidak mengetikkan nomor port
secara manual di URL, maka secara default, permintaan masuk ke port
default protokol. Biasanya, nomor port antara 0 hingga 1023 dicadangkan

22
 untuk beberapa layanan terkenal seperti HTTP, HTTPS, FTP, dll.

 Apa itu Servlet

Servlet adalah program Java yang berjalan di dalam server web; itu
menerima permintaan dan menanggapinya menggunakan protokol terkait
(Biasanya HTTP). Servlet cukup mampu untuk menanggapi segala jenis
permintaan; mereka biasanya digunakan untuk membuat aplikasi fungsional.
Kita dapat membuat situs web statis hanya dengan menggunakan HTML
dan CSS, tetapi untuk dinamis, kita membutuhkan bahasa pemrograman sisi
server. Untuk aplikasi ini, Java menyediakan teknologi Servlet, yang berisi
kelas servlet khusus HTTP.
Paket javax.servlet dan javax.servlet.http berisi antarmuka dan kelas
untuk membuat servlet . Semua servlet harus mengimplementasikan antarmuka
Servlet, yang mendefinisikan metode siklus hidup. Untuk
mengimplementasikan layanan generik, kita bisa menggunakan kelas
GenericServlet dengan meng-extend-nya. Ini menyediakan metode doGet dan
doPost untuk menangani layanan khusus HTTP.
 Mengapa Servlet Berguna?
Server web cukup mampu untuk melayani permintaan HTML statis,
tetapi mereka tidak tahu cara menangani permintaan dan basis data dinamis.
Jadi, kami membutuhkan bahasa untuk konten dinamis; bahasa-bahasa ini
adalah PHP, Python, Java, Ruby on Rails, dll. Di Java, ada dua teknologi
Servlet dan JSP, yang berhubungan dengan konten dinamis dan basis data. Java
juga menyediakan framework seperti Spring, Spring Boot, Hibernate, dan Struts
untuk menggunakan servlet dan JSP dengan mudah.
Servlet dan JSP adalah teknologi sisi server yang memperluas
fungsionalitas server web. Mereka mendukung respons dinamis dan persistensi
data. Kita dapat dengan mudah membuat aplikasi web menggunakan teknologi
tersebut.

23
Aplikasi Web Pertama Menggunakan Java Servlet
Untuk membuat aplikasi web, kita memerlukan alat-alat berikut:
1. IDE ( Eclipse atau Netbeans)
2. Basis data (Oracle atau Mysql )
3. Server (Tomcat atau xampp)
Sebelum Membuat aplikasi web apa pun, pastikan semua alat di atas terpasang
dengan benar di sistem Anda.

Langkah1: Buka Eclipse Buat Proyek Web Dinamis

Buka Eclipse IDE, arahkan ke File-> New-> Dynamic Web Project.

Jika proyek web dinamis tidak terdaftar di IDE Anda, buka opsi lain dan cari. Klik
untuk melanjutkan.

Langkah2: Berikan Nama Proyek

Sekarang, masukkan nama proyek dan klik Berikutnya untuk melanjutkan.

24
Ikuti petunjuknya dan centang generate web.xml deployment deskriptor.

Sekarang, proyek kita sudah siap; struktur proyek akan terlihat sebagai berikut:

25
Langkah3: Buat Servlet

Sekarang, buat servlet dengan mengklik kanan folder Java Resources/src . Untuk
membuat servlet klik kanan pada folder src dan arahkan ke menu New->
Servlet . Di sini, berikan nama Servlet:

26
Klik tombol Selesai . Ini akan membuat TestServlet seperti yang ditentukan. Anda
dapat memilih salah satu nama Servlet Anda.

TestServlet.java:

impor java.io.IOException;
impor javax.servlet.ServletException;
impor javax.servlet.annotation.WebServlet;
impor javax.servlet.http.HttpServlet;
impor javax.servlet.http.HttpServletRequest;
impor javax.servlet.http.HttpServletResponse;

/**
* Kelas implementasi Servlet TestServlet
*/
@WebServlet ( "/TestServlet" )
TestServlet kelas publik memperluas HttpServlet {
serialVersionUID panjang akhir statis pribadi = 1L;

/**
* @lihat HttpServlet#HttpServlet()
*/
publik TestServlet() {
super ();
// TODO rintisan konstruktor yang dihasilkan secara otomatis
}

/**
* @lihat HttpServlet#doGet(permintaan HttpServletRequest, respons
HttpServletResponse)
*/
void terproteksi doGet(permintaan HttpServletRequest, respons
HttpServletResponse) melempar ServletException, IOException {
// TODO rintisan metode yang dihasilkan secara otomatis

27
 response.getWriter().append( "Disajikan di:
" ).append(request.getContextPath());
}

/**
* @lihat HttpServlet#doPost(permintaan HttpServletRequest, respons
HttpServletResponse)
*/
protected void doPost(permintaan HttpServletRequest, respons
HttpServletResponse) melempar ServletException, IOException {
// TODO rintisan metode yang dihasilkan secara otomatis
doGet(permintaan, tanggapan);
}

Langkah4: Tambahkan file Servlet Jar

Kita dapat melihat Servlet kita menampilkan banyak kesalahan karena kita belum
menambahkan file jar servlet-api . Untuk menambahkan file jar, klik kanan pada
proyek dan pilih opsi konfigurasi dengan menavigasi ke opsi Build Path->
Configure Build Path . Sekarang, klik opsi Add External JARs .

28
Arahkan ke direktori tempat Anda menginstal server Anda dan pilih file servlet-
api.jar .

Klik Buka untuk melanjutkan.

Sekarang pilih opsi Terapkan dan Tutup . Ini akan menambahkan file jar ke
proyek kami.

Langkah5: Buat file HTML atau JSP

29
Sekarang, aplikasi web pertama kita hampir siap. Kita dapat membuat halaman
HTML yang ingin kita tampilkan di website kita.

Untuk membuat halaman HTML, klik kanan pada folder WebContent dan pilih
opsi New HTML file dari menu New-> HTML File dengan nama index.html .

Kami telah membuat file HTML berikut:

index.html:

<!DOCTYPE html >

<html> _ _
<kepala> _ _
< meta charset = < em > "UTF-8" </ em > >
< title > Aplikasi Web Pertama </ title >
</kepala> _ _
<tubuh> _ _
< h1 > Selamat datang </ h1 >
<ul> _ _
< li > < a href = "#" > Beranda </ a > </ li >
< li > < a href = "#" > Berita </ a > </ li >
< li > < a href = "#" > Kontak </ a > </ li >
< li > < a href = "#" > Tentang </ a > </ li >
</ul> _ _
</tubuh> _ _
</html> _ _

Langkah6: Petakan File

Sekarang, petakan file ini di file web.xml. Web.xml adalah deskriptor penerapan
untuk aplikasi Servlet. Karena, Servlet 3.0, kita dapat menggunakan anotasi alih-
alih deskriptor penerapan.

Untuk memetakan servlet, kita harus memberikan detail servlet seperti nama dan
kelas Servlet. Pertimbangkan kode di bawah ini:

<servlet> _ _
< nama-servlet > MyHttpTestServlet </ nama-servlet >

30
< kelas-servlet > TestServlet </ kelas-servlet >
</servlet> _ _
<pemetaan-servlet> _ _
< nama-servlet > MyHttpTestServlet </ nama-servlet >
< pola-url > / selamat datang </ pola-url >
</ pemetaan servlet >

Kami juga dapat menentukan file selamat datang kami; file selamat datang adalah
file pertama dari proyek yang memulai proyek, juga dikenal sebagai
Beranda. Kami dapat menentukan beberapa file selamat datang.

Pertimbangkan kode di bawah ini:

web.xml:

<? versi xml = "1.0" penyandian = "UTF-8" ?>

< aplikasi web xmlns:xsi = "http://www.w3.org/2001/XMLSchema-
instance" xmlns = "http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation
= "http ://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id = "WebApp_ID" v
ersi = "3.1" >
< nama-tampilan > Aplikasi Web Dasar </ nama-tampilan >
< daftar file selamat datang >
< file selamat datang > index.html </ file selamat datang >
< file selamat datang > index.htm </ file selamat datang >
< file selamat datang > index.jsp </ file selamat datang >
< file selamat datang > default.html </ file selamat datang >
< file selamat datang > default.htm </ file selamat datang >
< file selamat datang > default.jsp </ file selamat datang >
</ selamat datang-file-daftar >
<servlet> _ _
< nama-servlet > MyHttpTestServlet </ nama-servlet >
< kelas-servlet > TestServlet </ kelas-servlet >
</servlet> _ _
<pemetaan-servlet> _ _
< nama-servlet > MyHttpTestServlet </ nama-servlet >

31
< pola-url > / selamat datang </ pola-url >
</ pemetaan servlet >
</ aplikasi web >

Dari kode di atas, kita dapat melihat secara default servlet mendefinisikan
beberapa file selamat datang. Jika Anda ingin menggunakan file apa pun selain
file yang terdaftar, Anda dapat menentukannya di sini.

Sekarang, aplikasi web pertama kita sudah siap.

Langkah7: Jalankan Aplikasi

Untuk menjalankan aplikasi, klik kanan pada proyek dan jalankan di server
dengan memilih opsi Run-> Run on Server .

Butuh beberapa waktu untuk memuat aplikasi.

32
Kami juga dapat mengujinya di browser lain dengan memasukkan URL.

Sekarang, kita dapat mendesain ini dengan menambahkan lebih banyak halaman
web dan gaya.

Pada layar di atas, kami telah memperbarui file index.html kami sebagai berikut:

33
<!DOCTYPE html >
<html> _ _
<kepala> _ _
< meta charset = "UTF-8" >
< title > Aplikasi Web Pertama </ title >
</kepala> _ _
<gaya> _ _
ul {
daftar-gaya-jenis: tidak ada;
margin: 0;
bantalan: 0;
}
tubuh {
warna latar belakang: #E6E6FA;
}
</ gaya >
<tubuh> _ _
< h1 > Selamat datang </ h1 >
< kelas ul = "poin" >
< li > < a href = "#" > Beranda </ a > </ li >
< li > < a href = "#" > Berita </ a > </ li >
< li > < a href = "#" > Kontak </ a > </ li >
< li > < a href = "#" > Tentang </ a > </ li >
</ul> _ _
< img alt = "gambar" src = "gambar.jpg" width = "300" height = "200" >

</tubuh> _ _
</html> _ _

Tambahkan file gambar ke folder WebContent .

34
 BAB III

PENUTUP

A. Kesimpulan
Kesimpulannya, Java Web Application dengan HTML merupakan solusi yang
baik untuk mengembangkan aplikasi web yang responsif, interaktif, dan dapat
diandalkan dengan pengguna. Penggunaan Java dan HTML dalam pengembangan
Java Web Application memberikan keuntungan untuk memudahkan
pengembangan, pemeliharaan, dan perluasan aplikasi secara sistematis dan
efisien, serta memungkinkan pengembangan antarmuka pengguna yang menarik
dan mendukung SEO.

B. Saran
Dengan dibuatnya makalah ini semoga pembaca dapat memahami materi
tentang java web aplikasi. Semoga makalah ini dapat bermanfaat bagi
pembaca,jika ada penulisan dan susunan kata yang salah kami memohon maaf
yang sebesar-besarnya.

35
 DAFTAR PUSTAKA

Kurniawan, Budi. (2002). Java for the Web with Servlets, JSP, and EJB.
Australia: Sams Publishing.
Prasetyo, Didik Dwi. (2007). 150 Rahasia Pemrograman Java. Jakarta: Elex
Media Komputindo
Hartono, Tristin. (2022). Apa itu HTML? Panduan Lengkap Belajar HTML bagi
Pemula. Diakses pada 18 Maret 2023, dari
https://www.dewaweb.com/blog/panduan-lengkap-untuk-belajar-html-bagi
pemula/#Kerangka_Dasar_HTML

Aprilia, Putri. (2021). Apa itu Java? Pengertian, Kelebihan, Kekurangan, dan
Contohnya. Diakses pada 18 Maret 2023, dari
https://www.niagahoster.co.id/blog/java-adalah/

Muhardian, Ahmad. (2020). Belajar HTML #02: Apa itu Tag, Elemen, dan
Atribut dalam HTML?. Diakses pada 18 Maret 2023, dari
https://www.petanikode.com/html-tag-elemen-atribut/

Pankaj. (2022). Java Web Application Tutorial for Beginners. Diakses pada 18
Maret 2023, dari
https://www.digitalocean.com/community/tutorials/java-web-application-tutorial-
for-beginners

36
 POWER POINT

Maca-macam tags HTML

 Tag HTML Membuat Judul
No Nama Tag Fungsi
1 <h1> s/d <h6> Membuat judul atau heading
2 <hr> Memisahkan konten (biasanya
ditampilkan garis pembatas)
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

Preview :

37
• Tag HTML untuk Membuat Paragraf
No Nama Tag Fungsi
1 <p> Membuat paragraf
2 <br> Membuat garis baru
3 <pre> Memfortmat teks atau kalimat

Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<br> example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.

38
 My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>

Preview :

• Tag Style
No Nama Tag Fungsi
1 style Atribut untuk elemen
styling pada HTML
2 background-color Memberikan warna
latar belakang
3 color Memberi warna pada
teks
4 font-family Mengubah
font pada
teks
5 font-size Mengatur
ukuran font
6 text-align Mengatura
perataan teks
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>

39
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

Preview :

 Tag Formating
No Nama Tag Fungsi
1 <b> Membuat teks tebal
2 <strong> Membuat teks penting
3 <i> Membuat teks miring
4 <em> Membuat teks
ditekankan
5 <mark> Membuat teks ditandai
6 <small> Membuat teks kecil
7 <del> Teks dihapus
8 <ins> Teks dimasukan
9 <sub> Teks subscript
10 <sup> Teks superscript
Contoh penggunaannya yaitu sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>

40
 <p>This is_subscript and ^superscript</p>

</body>
</html>

Preview :

• Tag Gambar
No Nama Fungsi
Tag
1 <img> Elemen untuk
mendefinisikan gambar
2 src Atribut untuk
menentukan URL
gambar
3 alt Mendefinisikan teks pada
gambar, jika gambar tidak dapat
ditampilkan
4 width – height Menentukan ukuran gambar
5 float Properti untuk float image pada
CSS
6 <map> Mendefinisikan gambar peta
7 <area> Mendefinisikan area atau
daerah-daerah gambar pada peta
8 <picture> Menampilkan gambar yang
berbeda untuk perangkat yang
berbeda

41
 Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users

who cannot see the image gets an understanding of what the
image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="300"

height="300">

</body>
</html>

Preview :

• Tag Form

42
No Nama Tag Fungsi
1 <form> Membuat formulir untuk
mengumpulkan input pengguna
2 <input> Membuat tipe inputan pada form
yang akan dibuat
3 <textare> Elemen untuk mendefinisikan field
input
4 <label> Memberikan label pada elemen input
5 <fieldset> Mengelompokan elemen yang
terdapat pada sebuah form
6 <select> Membuat input dengan pilihan yang
berbentuk list drop down
7 <optgroup> Mengelompokan beberapa pilihan
pada daftar pilihan input
8 <option> Mendefinisikan opsi yang bisa dipilih
9 <button> Membuat Button
10 <datalist> Membuat daftar pilihan untuk input
data
11 <output> Menampilkan hasil dari hitungan

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options
for an input element.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">

43
 <option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or

IE9 (and earlier).</p>
</body>
</html>

Preview :

• Tag Tabel
No Nama Tag Fungsi
1 <table> Membuat tabel pada web
2 <tr> Membuat baris pada tabel
3 <td> Membuat kolom pada tabel
4 <th> Membuat judul pada kolom.
Contohnya nama, kelas, dan alamat.
5 <caption> Membuat judul tabel
6 border Mengatur garis tabel
7 border- Mengatur batas garis tabel

44
 collapse
8 padding Mengatur padding pada cell
9 text-align Mengatur perataan pada konten tabel
10 border- Mengatur jarak spasi garis tabel
spacing
11 colspan Menggabungkan beberapa kolom.
Kalau di office disebutnya Merge Cell
12 rowspan Menggabungkan beberapa baris
13 id Memberikan id pada tabel atau kolom
Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>

45
 <th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Preview :

46
• Tag Daftar/ List
No Nama Tag Fungsi
1 <ul> Untuk membuat tampilan daftar
menggunakan simbol seperti bullet,
cyrcle, dan lainnya.
2 <ol> Membuat daftar menggunakan nomor,
huruf, romawi, dan lainnya
3 <li> Menentukan berbagai item yang ingin
ditampilkan
4 <dl> Mendefinisikan daftar deskripsi
5 <dt> Mendefinisikan istilah deskripsi
6 <dd> Menggambarkan istilah dalam daftar
deskripsi
7 <type> Menentukan jenis penomoran

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

47
<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Preview :

48