MAKALAH

(HTML, CSS, JAVA SCRIPT, PHP DAN MYSQL)

Dosen Pengampu :
Akhmad Khairani S, Kom

Disusun Oleh :
Muhammad Luthfi Amin
220310052

Mata Kuliah :
Teknologi Web

PROGRAM STUDI TEKNOLOGI INFORMASI

INSTITUT TEKNOLOGI SAPTA MANDIRI
TAHUN 2023
 KATA PENGANTAR

Perkembangan teknologi informasi saat ini sudah tidak dapat lagi terlepas dari teknologi
internet di mana internet telah menjadi suatu teknologi yang tidak dapat lepas dari kehidupan
manusia modern sekarang ini (Pandey et al., 2011). Setiap detik, informasi baru bermunculan di
internet sehingga setiap orang dapat mengetahui berita yang up-to-date (Hangjung et al., 2007).
Perkembangan internet yang begitu pesat juga diikuti dengan munculnya berbagai macam
aplikasi web, seperti layanan web service dan E-Travel. Web service sendiri merupakan sebuah
sistem perangkat lunak yang dirancang untuk mendukung interoperasi dalam interaksi mesin ke
mesin melalui sebuah jaringan. Interaksi dilakukan melalui sebuah mekanisme atau protokol
tertentu. Web service juga memiliki sebuah antarmuka yang mendeskripsikan seluruh layanan
yang tersedia dalam format yang dapat diproses oleh mesin, yaitu Web service Description
Language (WSDL).

Rahmat serta karunia-Nya sehingga proses pembuatan makalah dengan judul HTML, CSS,
JAVA SCRIPT, PHP DAN MYSQL

Makalah ini dibuat dengan tujuan memenuhi tugas individu dari Bapa Akhmad Khairani pada
mata kuliah Teknologi Web. Penyusunan makalah ini bertujuan menambah wawasan kepada
pembaca tentang informasi pengunaan HTML, CSS, JAVA SCRIPT, PHP dan MYSQL sebagai
aplikasi yang sering digunakan untuk membuat web.
Penulis juga mengharap adanya kritik serta saran dari pembaca apabila menemukan
kesalahan dalam makalah ini.

Barabai, 16 April 2023

Muhammad Luthfi Amin

220310052

i
 Pembahasan

HTML

A. Pengertian HTML?

HTML adalah bahasa markup untuk membuat halaman web. Kepanjangan dari HTML
adalah Hypertext Markup Language. Artinya, HTML menggunakan simbol tertentu (tag)
yang nantinya akan diterjemahkan oleh browser ke halaman web.

Dengan menggunakan tag-tag HTML, Anda dapat membangun struktur halaman,

menambahkan konten seperti teks dan gambar, serta memberikan format dan tata letak pada
website.

B. Sejarah HTML

Sejarah HTML pertama kali dikembangkan oleh Tim Berners-Lee, ilmuwan dari
organisasi European Organization for Nuclear Research (CERN) pada tahun 1990.
Awalnya, markup language diciptakan oleh IBM, perusahaan hardware dan software asal
Amerika Serikat.

Sejak tahun 1991, Tim Berners-Lee, yang juga penemu world wide web (WWW),
mengembangkan HTML sebagai solusi untuk memudahkan para ilmuwan CERN dalam
mengakses dokumen satu sama lain. Barulah di tahun 1993, bahasa markup ini meluncur
resmi ke publik dan berkembang menjadi berbagai versi hingga saat ini.

Sampai saat ini HTML5 menjadi versi yang paling update dengan sistem yang paling
canggih. Popularitas HTML versi terbaru ini pun sangat pesat. Bahkan, saat ini ada 87,4
persen website yang sudah menggunakan HTML5. Sejarah penggunaan HTML secara umum
ini pun tak bisa lepas dari peran World Wide Web (WWW). WWW dan HTML adalah dua
aspek yang saling berhubungan. Karena, HTML adalah dasar untuk membuat halaman
website, yang nantinya ditampilkan pada WWW.

C. Fungsi HTML

Berikut adalah beberapa fungsi HTML lainnya:

1. Membuat Struktur Halaman Web

Fungsi utama HTML adalah untuk membangun struktur halaman web. Mulai dari membuat
header, footer, navigasi, hingga kontennya. Peran HTML juga sebagai pondasi halaman web.
Sebab, untuk menerapkan beberapa bahasa pemrograman maupun bahasa lainnya seperti CSS
dan JavaScript, website membutuhkan struktur yang dibangun dari HTML. Jadi, tak
berlebihan juga jika HTML dikatakan sebagai dasar untuk memahami bahasa pemrograman.

3
2. Menambahkan Konten Website

Selain membuat struktur, Anda juga bisa memasukkan gambar di HTML dan menambah
konten pada halaman web. Sebab, bahasa markup ini memungkinkan Anda menyisipkan
ilustrasi dan video, membuat tabel HTML, dan memasukkan media lainnya.

3. Mengatur Format dan Tata Letak

Berikutnya, HTML memungkinkan Anda mengatur format dan mengatur tata letak konten
dalam halaman web. Seperti memilih ukuran dan jenis huruf, menentukan warna huruf
dengan berbagai kode warna HTML, serta mengatur tata letak konten pada website.

Semisal untuk menandai kalimat cetak tebal, gunakan kode HTML <bold>. Sedangkan untuk
memiringkan tulisan, gunakan tag <italic>. Dengan kode HTML yang tepat, Anda dapat
membuat tampilan konten menarik serta mudah dibaca.

4. Mengarahkan Pengguna ke Halaman Website Lain

HTML juga berfungsi mengarahkan pengguna ke halaman atau website lain

menggunakan link tertentu. Link ini bisa disematkan ke dalam teks tertentu, alias
sebagai anchor text.

Cara membuat hyperlink dengan kode HTML yaitu menggunakan tag <a>. Misalnya:

<a href="https://www.niagahoster.co.id/blog/peluang-bisnis-online/">Peluang Bisnis

Online</a>

Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang saling
berhubungan dengan halaman yang sedang dibaca. Anda juga bisa mengarahkan mereka ke
landing page tertentu..

D. Mengenal Komponen HTML

Secara umum komponen HTML terdiri dari Tag, Elemen, dan Atribut.

1. Tag

Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web
browser. Tag dibuat dengan menggunakan kurung siku <…>, di mana di dalamnya berisi
nama tag. Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul,
paragraf, heading, cetak tebal, miring, italic, dan lainnya.

Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan
format tebal. Selain itu, tag ditulis secara berpasangan, yaitu tag pembuka dan tag
penutup. Pada tag penutup ditambahkan garis miring (/) di depan nama tag.

Tag HTML sendiri awalnya hanya berjumlah 18. Hingga saat ini sudah ada lebih dari 250
tag. Banyak juga, ya. Namun, Anda tak perlu menghafal semua tag yang ada.

Anda hanya perlu mengingat beberapa contoh HTML untuk pemula berikut ini:

4
  <html>, untuk memulai membuat halaman HTML yang mencakup semua konten
dan elemen.
 <head>, untuk membuat halaman HTML yang mencakup tampilan deskripsi di hasil
pencarian Google, style konten (CSS), dan lainnya.
 <title>, untuk membuat judul website
 <body>, untuk membuat isi website
 <h1> <h2> sampai <h6> , untuk mengatur heading konten
 <p> , untuk membuat paragraf.

2. Elemen

Elemen merupakan komponen HTML yang berupa keseluruhan kode dari tag pembuka
hingga tag penutup. Elemen terdiri dari teks dan simbol yang berupa tag pembuka, isi tag
atau konten, dan tag penutup.

Contohnya: <bold>Belajar HTML</bold>

Pada sebuah elemen juga bisa berisi elemen lainnya. Jadi elemen tersebut tak hanya berisi
satu tag saja, tetapi banyak tag. Elemen itu disebut nested elements. Sebagai contoh, simak
kode berikut:

<html>

<body>

<h2>Judul Heading</h2>

<p>Paragraf pertama artikel.</p>

</body>

</html>

Jika diperhatikan elemen HTML tersebut, dari tag pembuka <html> lalu tag <body> yang
berisi elemen tag heading dan elemen tag paragraf.

3. Atribut

Atribut adalah informasi atau perintah tambahan yang berada dalam elemen. Atribut ini
berfungsi sebagai penjelas perintah tag pada elemen.

Misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>.

Tag <img> memiliki atribut khusus yaitu (scr) dan (alt) yang artinya browser harus
menampilkan gambar.jpg dengan alt text “Bunga Matahari”.

Dari contoh di atas, dapat diketahui juga kalau jumlah atribut dalam sebuah tag bisa lebih dari
satu. Meski demikian, tidak semua atribut bisa digunakan dalam sebuah tag. Berikut ini jenis
atribut khusus beberapa tag:

5
Selain atribut khusus, ada beberapa atribut yang digunakan untuk menentukan aksi pada
dilakukan jika terjadi sesuatu pada elemen.

Misalnya , (onload) saat loading selesai, (onoffline) saat tiba-tiba offline, (onresize) ukuran
jendela. Atribut tersebut disebut dengan atribut event. Atribut tersebut nantinya akan
diimplementasikan dengan JavaScript. Sehingga halaman website dapat melakukan aksi
tertentu.

E. Cara kerja HTML

Sederhananya, cara kerja HTML yaitu bahasa markup ini menyusun halaman website dengan
tag-tag tertentu. Setiap tag punya fungsinya sendiri, sehingga Anda bisa membuat struktur
dan tampilan konten yang dibutuhkan. Nantinya, browser akan menerjemahkan tag ini untuk
ditampilkan pada website.

1. Membuat file HTML dengan aplikasi editor HTML. Lalu, Anda menyimpannya
dengan format .html atau .htm.
2. Dokumen HTML yang dibuat bisa saja lebih dari satu. Sebab dalam sebuah website,
biasanya terdiri dari banyak halaman. Misalnya aja, halaman utama, kontak, blog, dan
lainnya.
3. Masing - masing dokumen, berisi elemen HTML yang akan menyusun bagian
heading, paragraf, isi konten, dan lainnya.
4. Ekstensi file ini dapat dibuka dengan menggunakan web browser seperti Google
Chrome, Safari, atau Mozilla Firefox.

F. Kelebihan dan Kekurangan HTML

Kelebihan

 Memiliki banyak sumber dengan komunitas yang sangat besar dan penggunaan yang
sangat luas
 Bahasa pemrograman dijalankan di semua web browser
 Dapat dipelajari dengan mudah oleh pengembang web pemula

6
  Bahasa pemrograman memiliki struktur yang rapi dan konsisten sehingga mudah
untuk dipelajari
 Bahasa pemrograman open source (gratis)
 Mudah diintegrasikan dengan bahasa back-end seperti Node.js dan PHP
 Maintan dilakukan langsung oleh W3C (World Wide Web Consortium)
 Digunakan untuk pembuatan struktur konten pada website yang dapat ditambahkan
dengan CSS atau bahasa pemrograman lain yang dapat dijalankan seperti Javascript.

Kekurangan

 Penggunaan HTML murni hanya dapat diimplementasikan untuk halaman web statis.
Untuk fitur yang lebih dinamis, Kanca IT dapat menggunakan Javascript atau bahasa
pemrograman back-end lainnya
 Bahasa pemrograman ini tidak mendukung user untuk menjalankan logic sehingga
semua halaman yang dibuat harus dibuat secara terpisah walaupun menggunakan
elemen yang sama
 Terdapat beberapa fitur baru yang terkadang tidak dapat digunakan
pada browser dengan cepat.
 Perilaku browser yang tidak dapat diprediksi membuat proses render tag baru
tekendala.

G. Contoh Coding HTML untuk Pemula

Agar tidak bingung, sebaiknya Anda mengenal dulu beberapa istilah untuk belajar HTML:

 Tag: awalan instruksi atau perintah yang akan dibaca browser. Misalnya: tag <bold>.
 Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >) hingga tag penutup (/<
>).

Atribut/property: informasi atau perintah tambahan yang berada di dalam elemen (Contoh:
style)
1. HTML Basic

Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic. Apa saja yang
pasti ada dalam coding HTML Basic? Kami akan membedahnya satu per satu.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Title of the document</title>
5 </head>
6 <body>
7 <h1>Heading</h1>
8 <p>Paragraf.</p>

7
9 </body>
10 </html>

Pertama, dokumen HTML adalah harus diawali dengan <!DOCTYPE html>. Fungsinya
sebagai deklarasi sehingga browser tahu dokumen ditulis dalam HTML.

Berikutnya, ada tag <html>. Tag ini akan menampung seluruh tag HTML dari awal hingga
penutupan, yaitu </html>.

Setelah <html>, masuk ke tag <head>. Seperti namanya, tag ini berisi coding HTML untuk
membuat kepala dokumen. Hasilnya akan terlihat sebagai judul pada tab browser Anda.

Lalu, tibalah Anda ke tag <body>. Coding HTML ini memuat inti dokumen HTML Anda,
yaitu isian website.

Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai (</html>,
</body>, dll).

2. Heading

Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya, untuk
memetakan info dari umum ke khusus. Selain memudahkan visitor menangkap inti informasi,
heading juga mendongkrak SEO website.

Alasannya, Google jadi lebih paham struktur dan konteks artikel, deskripsi produk, ataupun
media teks lainnya pada website.

Berikut contoh HTML untuk berbagai macam heading.

<h1> Heading 1 <h1>

<h2> Heading 2 <h2>
<h3> Heading 3 <h3>
<h4> Heading 4 <h4>

Makin spesifik info dan pemilihan sub-judulnya, makin kecil juga ukuran heading. Tentunya
dengan coding HTML tag heading, Anda tak perlu repot-repot format ukuran heading secara
manual.

3. Paragraf

Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel website yang tidak punya
paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-gara tak punya jeda.

8
Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan coding HTML,
gunakan saja tag P.

<p>text</p>

Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil, tulisan jadi lebih enak
dibaca dan rapi, bukan?

4. Bold/Strong

Contoh coding HTML berikutnya, ada bold/strong.

Pasti, Anda sudah tahu tag HTML ini akan memberi efek tebal pada tulisan. Tapi, apa sih beda
antara bold dan strong?

Tulisan dengan efek bold (atas) dan strong (bawah)

Pertama, coding HTML bold dan strong memiliki tag yang berbeda:

<b>Afiliasi adalah kerja sama promosi dan penjualan produk</b>

<strong>Afiliasi adalah kerja sama promosi dan penjualan
produk</strong>

Dan meskipun outputnya terlihat sama, Google memandangnya lain.

9
Coding HTML bold sekadar memberi efek tebal, sedangkan tag strong memiliki pengaruh
bagi web crawling. Sebab, tag strong mampu memberitahu Google kata atau keyword penting
yang memperkuat info dari konten website.

5. Italic/Emphasize

Mirip seperti tag bold/strong, ada dua coding HTML yang bisa digunakan untuk
memiringkan kata-kata.

Berikut contoh HTML dengan tag italic/emphasize.

<i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i>

<em>Bug adalah istilah bahasa Inggris yang artinya serangga.<em>

Lalu, manakah yang sebaiknya pakai?

Kembali lagi ke kebutuhan . Jika hanya ingin memiringkan kata-kata saja, gunakanlah coding
HTML italic. Sedangkan jika mau menekankan kata tertentu agar Google lebih mudah
mengindeks konten, pakailah tag <em>.

6. Line Break

Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf.

Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris tersebut masih
dalam paragraf yang sama. Ini dia contoh HTML Line Break.

<p> <br>Text
<br> Text </p>

Hasilnya akan terlihat seperti ini.

Lalu, apa sih yang membedakan coding HTML Line Break dengan Paragraf?

Untuk outputnya sendiri memang sepintas sama. Namun, tag <p> lebih berisiko error pada
beberapa browser. Sedangkan tag <br> digadang-gadang akan lebih di-support
oleh HTML5 daripada tag <p>.

Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak memiliki tag penutup
</br>. Jadi, Anda cukup menggunakan <br> saja.

10
7. Images

Faktanya, memasukkan ilustrasi gambar meningkatkan views hingga 45%. Untuk

memasukkan gambar, gunakan coding HTML images. Ukurannya atur pada atribut Style.

<img src=”url atau lokasi penyimpanan gambar” alt=”text”

style=”width:500px;height:333px;”>

Berikut hasil contoh HTML images.

Dalam contoh coding HTML images tadi ada atribut ‘alt’. Apakah itu?. Alt text adalah kata
yang diselipkan ke dalam gambar. Fungsinya sebagai antisipasi jika gambar invalid. Artinya,
saat gambar tidak muncul, alt text akan menggantikannya sehingga visitor web tetap
memahami deskripsi image.

8. Horizontal line

Contoh HTML selanjutnya, horizontal line.

Sederhana saja, coding HTML ini memungkinkan Anda membuat garis horizontal.

Contoh coding HTML-nya juga simple. Cukup masukkan tag <hr> pada bagian yang Anda
inginkan.

<p> text </p>

<hr>
<p> text </p>

Penting!

Beda dari tag lainnya, tag <br>, <img>, dan <hr> memang tidak memiliki tag penutup
(/br>,
</img>, </hr>).

11
9. Cross-through text

Cross-through text atau teks yang dicoret mampu menekankan makna tertentu pada
tulisan/informasi. Biasanya, para penulis menggunakan strategi ini untuk menunjukkan versi
benar atau lebih baik dari suatu hal.

Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML ini.

<del>text.</del>

10. Quote

Banyak orang menyukai quote. Selain indah, quote mampu memotivasi seseorang melakukan
action tertentu pada website. Entah itu lanjut membaca artikel, membeli produk, dan hal
lainnya.

Lalu, gimana sih cara membuat quote pada website dengan coding HTML?

Nah, Anda bisa membuat dua jenis quote: blockquote atau short quote.

Blockquote adalah quote panjang yang terpisah dari teks utama. Sedangkan short quote
yaitu quote ringkas yang bisa menjadi satu bagian atau terpisah dari teks utama.

Blockquote

Short Quote

Di bawah ini contoh HTML yang bisa Anda gunakan.

<blockquote>text</blockquote>
<q>text</q>

11. Font

Dari contoh-contoh HTML sebelumnya, mungkin Anda bosan karena hasil testing syntax
selalu tampil dalam Times New Roman. Tenang, Anda bisa kok mengubah jenis font. Baik
itu pada header, paragraf, ataupun jenis teks lainnya. Caranya, masukkan property style ke
dalam tag.

12
 <h2 style=“font-family:Georgia;”>text</h2>
<p style=“font-family:Comic Sans MS;”>text</p>

Contoh coding HTML di atas kira-kira menghasilkan output seperti ini.

Oh ya, penting Anda tahu, setiap browser menyediakan jenis font berbeda. Jadi jangan
bingung jika ada browser yang tidak mau menampilkan jenis font permintaan Anda.

12. Highlighted

Pernahkah Anda menstabilo catatan penting di buku yang sedang Anda baca?

Nah, Anda juga bisa lho highlight kata penting pada website Anda. Berikut contoh coding
HTML untuk melakukannya.

<p> text <mark> catatan penting </mark> text </p>

Secara otomatis, highlight text Anda akan berwarna kuning.

Jika ingin memakai warna lain, caranya yaitu dengan menambahkan CSS berikut.

mark {
background-color: yellow;
color: black;
}

13. Text Colour

Butuh warna teks selain hitam?. Bisa dengan mengatur warna teks sendiri. Caranya, gunakan
property style seperti contoh HTML berikut.

<p style=”color:#ff471a;”>The flower is red </p>

Nah, Anda harus memasukkan warna sesuai dengan kode warna HTML. Nantinya, browser
akan memproses dan menampilkan hasil sesuai permintaan warna.

13
14. Text Size

Selain mengubah warna teks, bisa juga mengatur ukuran tulisan. Caranya seperti contoh
HTML di bawah.

<p style=”font-size:48px;”>text</p>
<p style=”font-size:20px;”>text</p>

Hasilnya akan terlihat seperti ini.

15. Text Alignment

Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja property style seperti ini:

<p style=”text-align:right;”>Geser teks ke kanan</p>

<p style=”text=align:left;”>Geser teks ke kiri</p>

Lihat hasilnya. Teks langsung bergeser sesuai perintah. Tapi, kalau yang Anda masukkan
adalah “text-align: center”, jangan kaget kalau teks tidak berpindah. Lho, kenapa begitu?

Saat ini, HTML5 tidak support “text-align: center”. Sehingga, Anda harus menggunakan
CSS property style jika ingin memindah posisi teks ke tengah.

<html>
<head>
<style>
p {text-align: center;}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>

14
16. Anchor Text

Anchor text adalah kata yang bisa diklik sehingga visitor bisa membuka halaman web tertentu.

Kenapa kata-kata tersebut bisa di-klik? Tentunya, karena ada link tersemat di dalamnya.
Dengan anchor text, visitor web bisa menemukan info lain yang masih relevan. Selain itu,
Google jadi lebih terbantu dalam memahami konteks web.

Berikut contoh html anchor text.

<a href=”link”>text</a>

Nantinya, teks pilihan Anda akan memiliki warna berbeda sekaligus bisa di-klik.

17. CTA Button

Tak cuma menyematkan link ke dalam teks, coding HTML memungkinkan Anda membuat
CTA (Call-to Action) Button. CTA Button adalah tombol dengan link yang mengarahkan
visitor website menuju konversi.

Gimana sih cara membuat CTA Button dengan coding HTML? Berikut contoh HTML-nya.

<div class="button-wrapper">
<a class="button cta-button" href="link">text</a>
</div>

Beda dari tag lainnya, Anda melihat tag <div> pada syntax di atas. Yap, tag <div> berfungsi
membungkus elemen ke dalam satu grup/class.

Tag <div> memudahkan Anda saat mendesain dengan CSS. Sebab, CSS akan diterapkan
pada kelompok yang diinginkan saja. Dalam hal ini, class button-wrapper.

Syntax CTA Button tadi hanya menghasilkan output yang lebih mirip seperti anchor text
daripada sebuah tombol. Alasannya, contoh coding HTML itu hanya untuk membangun
kerangka CTA Button saja. Agar ada desainnya, perlu mendesain tombol CTA menggunakan
CSS untuk class button-wrapper.

Penting!

15
 Sisipkan syntax <link href=”style.css” rel=”stylesheet”> pada coding HTML supaya file
CSS terhubung dan desain bisa ditampilkan.

.button-wrapper {
display: block;
text-align: center;
}

.button {
border: none;
border-radius: 3em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: inline-block;
font-size: 1em;
padding: 1em 2em;
width: auto;
}

.cta-button {
background-color: #000;
color: #fff !important;
}

.cta-button:hover {
background-color: #777;

Source Code: drivencreativelymad.com

18. Ordered List

Seperti namanya, Ordered List berfungsi membuat poin secara urut. Bisa berupa numbering,
alfabet, ataupun romawi.

Cara membuatnya, pakailah coding HTML tag <ol>. Berikut contoh HTML Ordered List.

<ol>
<li> Point 1 </li>
<li> Point 2 </li>
</ol>

16
Mengapa ada tag <li>?

Tag <ol> memang biasanya diikuti tag <li>. Tag <ol> berfungsi menentukan kelompok info
yang mau diurutkan, sedangkan tag <li> untuk membuat list-nya. Tanpa tag <ol>, daftar list
secara otomatis menjadi bullet points (Unordered List).

Lalu, bagaimana jika Anda ingin Ordered List menggunakan alfabet ataupun angka romawi?
Simple saja, cukup memasukkan atribut type:

Type Fungsi

type=”1″ Item angka

type=”A” Item huruf besar

type=”a” Item huruf kecil

type=”I” Item romawi besar

type=”i” Item romawi kecil

Untuk memasukkan atributnya, silakan bubuhkan di sebelah tag <ol>.

<ol type="A">
<li> Point 1 </li>
<li> Point 2 </li>
</ol>

19. Unordered List

Kebalikan dari Ordered List, Unordered List memungkinkan membuat daftar item tanpa
peduli urutannya. Biasanya menggunakan icon seperti bullet, persegi, dll.

Untuk membuatnya bisa menggunakan contoh HTML berikut.

17
<ul>
<li> Point 1 </li>
<li> Point 2 </li>
</ul>

Dengan contoh coding HTML di atas, output-nya adalah list item dengan bullet points. Lalu,
bagaimana jika ingin ganti icon?. Mirip seperti cara pada Ordered List, bisa
menggunakan property list-style-type berikut.

Value Fungsi

disc List item berupa bullet hitam

circle List item berupa bullet putih

square List item berupa kotak

none List item tidak terlihat

Cara menyelipkan property list-style-type sebagai berikut:

<ul style="list-style-type:square;">
<li> Point 1 </li>
<li> Point 2 </li>
</ul>

20. Superscript

Pernahkah Anda menemukan huruf kecil melayang di atas tulisan normal seperti DC
ComicsTM? Atau angka pangkat seperti 42?. Tipografi ini disebut juga sebagai superscript.
Superscipt ini digunakan sebagai angka pangkat hingga logo trademark.

Bagaimana cara membuat superscript?. Caranya mudah, buat saja dengan coding HTML
<sup>. Tanpa waktu lama, Anda sudah berhasil membuat superscript.

18
 text^TM

21. Subscript

Lawan dari superscript adalah subscript. Biasanya, Anda menjumpai subscript sebagai
huruf/angka kecil di bagian bawah tulisan normal. Senyawa kimia, misalnya.

Penasaran contoh coding HTML Subscript? Lihat saja syntax ini.

Text _tags

22. Tabel

Contoh HTML berikutnya, tabel. Seumumnya membuat tabel, harus membuat baris dan kolom.

Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML berikut.

<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Namun, contoh HTML di atas hanya memberikan sebuah tabel sederhana saja.

19
23. Form

Apakah membuat form dengan coding HTML susah?

Jawabannya, tidak juga. Dengan tag <form>, bisa kok langsung membuat form dengan
HTML. Seperti contoh coding HTML di bawah.

<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
</form>

Lalu, jadilah tampilan form yang seperti ini. Sekarang Anda memiliki kolom username dan
password standar untuk form.

2.2 CSS

H. Pengertian CSS

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk
menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis
font, warna tulisan, dan latar belakang halaman.

CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun
sebuah website yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna
untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. Kenapa
demikian?. Apabila hanya menggunakan HTML ketika membangun website dengan beberapa
halaman, Anda harus menulis tag untuk sebuah elemen HTML di semua halaman tersebut.

I. Apa Fungsi CSS

Secara umum, CSS berfungsi untuk mengatur tampilan halaman website berbasis HTML atau
bahasa markup lainnya. Tapi, masih ada beberapa fungsi CSS lainnya, yaitu:

20
1. Mempercepat Loading Halaman Web

Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa
meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman
website sekaligus,.

2. Memudahkan Pengelolaan Kode

Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti
tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman
website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di
semua halaman.

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website, tetapi terbatas.
Nah, CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat
antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan
warna yang Anda inginkan, atau membuat menu dropdown CSS.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website optimal di berbagai
ukuran layar. Baik itu di laptop maupun di smartphone. Mengapa demikian?

CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar,
misalnya dengan max-width. Ketika menggunakan property ini mengubah ukuran elemen
HTML sesuai ukuran layar yang digunakan untuk menampilkan website.

J. Jenis Jenis CSS yang Perlu Anda Ketahui

Jenis jenis CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu Inline, Internal
dan External. Ini dia beda Inline CSS, Internal CSS dan External CSS:

1. Inline CSS

Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya
mempengaruhi satu baris kode HTML.

Perhatikan baris kode di bawah ini sebagai contohnya:

21
<h1 style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>

Dengan kode tersebut, Anda akan mendapatkan hasil ini:

Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS
ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di
sebuah halaman.

2. Internal CSS

Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran
20px yang berwarna putih, kodenya seperti di bawah ini:

<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>

<p>Ini adalah contoh kalimat.</p>

Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya
berbeda dari halaman lain.

3. External CSS

Agar halaman website bisa menggunakan external CSS, Anda perlu menambahkan kode di
bagian header kode HTML-nya. Contohnya seperti berikut ini:

<head>
<link rel="stylesheet" type="text/css" href=fileCSSAnda.css">
</head>

22
Dengan kode tersebut, halaman website Anda akan menggunakan fileCSSAnda.css untuk
mengatur tampilannya.

Sekarang Anda sudah tahu bagaimana masing-masing jenis CSS dibuat dan dampaknya pada
halaman website, kan? Tapi, bagaimana cara kerja CSS ketika website dimuat? Mari simak
penjelasannya di bawah ini.

K. Cara Kerja CSS

Mulanya, browser akan memuat file HTML dan CSS (jika kodenya ditulis sebagai external
CSS). Kemudian, browser mengubah keduanya menjadi document object model (DOM).
Ini adalah komponen yang mewakili file HTML dan CSS dalam memori perangkat
pengunjung website.

Setelah HTML dan CSS diubah menjadi DOM, browser akan melakukan rendering, proses
di mana browser menerapkan pengaturan di kode CSS pada elemen-elemen HTML. Hasilnya
adalah halaman website yang tampil di layar perangkat Anda.

L. Contoh CSS

Berikut ini adalah beberapa contoh penerapan CSS yang mudah:

1. Menentukan Format Paragraf

Salah satu contoh CSS adalah untuk mengatur format paragraf. Misalkan ingin agar semua
paragraf dalam sebuah halaman website berukuran 120% dan berwarna abu tua, Anda cukup
menambahkan kode di bawah ini:

p { font-size: 120%; color: dimgray; }

2. Mengubah Warna Link

Anda juga bisa mengubah warna link dengan CSS. Sebagai catatan, warna link yang
ditentukan dengan CSS ada empat, yaitu:

 Normal: warna link yang belum pernah dibuka dan tidak diklik
 Visited: warna link yang sudah pernah dibuka

23
  Hover: warna ketika Anda meletakkan kursor di atas link
 Active: warna link ketika Anda klik

Untuk menentukan keempat warna itu, gunakan kode di bawah ini dan ketikkan warna yang
Anda inginkan setelah color:.

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal;
}

3. Menentukan Huruf Kapital/Kecil

Ingin agar sebuah paragraf berisi huruf kecil saja? Anda tinggal mengganti “Paragraf Anda”
di kode berikut ini dengan teks yang diinginkan:

<p class="smallcaps">Paragraf Anda.</p>

4. Membuat Kotak Teks

CSS juga memungkinkan Anda membuat kotak teks. Umumnya, kotak teks digunakan untuk
menonjolkan sebuah informasi penting. Untuk melakukannya, gunakan contoh CSS ini:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Kode tersebut akan menambahkan kotak dengan border berukuran 5px dan warna ungu di
sekitar teks yang Anda tandai dengan class important. Untuk menandai teks dengan class itu,
tambahkan kode berikut ini:

<p class="important">Paragraf Anda.</p>

5. Membuat Tombol Link

Link akan terlihat lebih mencolok jika diletakkan dalam sebuah tombol. Untuk membuatnya
dengan CSS, gunakan kode di bawah ini:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px
25px; text-align: center; text-decoration: none; display: inline-block; }

Supaya Anda tahu apa saja fungsi dari bagian-bagian kode tersebut, simak penjelasan berikut
ini:

 a:link, a:visited, a:hover, a:active memastikan bahwa tombol Anda akan selalu
tampil meski sudah diklik atau ditunjuk dengan kursor.
 background-color menentukan warna tombol.
 padding menentukan ukuran tombol.
 text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
 text-decoration menentukan ada atau tidaknya garis bawah di teks.
 display: inline-block memungkinkan Anda untuk mengatur tinggi dan lebar tombol.

24
 6. Meng-highlight Baris dalam Tabel

Jika ingin agar baris dalam sebuah tabel memiliki warna berbeda ketika ditunjuk dengan
kursor, Anda bisa menambahkan contoh CSS berikut ini:

tr:hover { background-color: #ddd; }

Setelah background-color: Anda cukup mengganti #ddd dengan kode warna CSS.
Cek warna CSS apabila Anda belum tahu.

M. Kelebihan dan Kekurangan CSS

Kelebihan
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain seefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada
css saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.
7. dan masih banyak lagi 🙂
Kekurangan
1. Tampilan pada browser berbeda-beda.
2. Kadang juga terdapat browser yang tidak support CSS (browser lama).
3. Harus tahu cara menggunakannya.
4. dibutuhkan waktu lebih lama dalam membuatnya.
5. Belum lagi ada bug/error dalam CSS.

N. Cara Membuat Website dengan HTML dan CSS

Sebelum masuk ke cara membuat website dengan HTML dan CSS, Anda harus
menyiapkan Text Editor dan Web Browser terlebih dahulu. Text editor digunakan
sebagai tools untuk menulis kode, sedangkan web browser digunakan untuk mengakses
website.

Pada tutorial ini, kami akan menggunakan Visual Studio Code (VS Code) sebagai teks
editornya dan Google Chrome sebagai browsernya. Anda bebas menggunakan tool favorit
Anda.

Website yang akan Anda buat kali ini adalah website portfolio sederhana menggunakan
HTML dan CSS saja. Nantinya, tampilan website akan seperti ini :

Terdapat empat langkah untuk membuat website tersebut, yaitu :

1. Membuat Struktur Project Web

Pertama-tama, buatlah folder penyimpanan proyek website portfolio Anda dan bukalah folder
tersebut pada VS Code. Pada contoh ini, kami menggunakan nama “Web Portfolio”

25
Kemudian, buat folder baru dengan nama images. Folder ini merupakan tempat untuk
menyimpan gambar/assets yang akan digunakan pada website.

Selanjutnya, buatlah dua file baru bernama index.html dan style.css web portfolio tersebut.

Index.html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan
konten website pada file ini.

Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah
dan mempercantik tampilan website.

2. Menambahkan Kode pada File index.html

File HTML berisi kode utama untuk membangun struktur website Anda. Ibarat mobil, HTML
di website sama seperti rangka mobil yang membentuk dan menopang body mobil. Oleh
karena itu, file ini harus dibuat terlebih dahulu.

Pada dasarnya, struktur setiap halaman HTML adalah tersusun atas 4 bagian utama, yaitu :

 Tag DTD/Doctype : Document Type Declaration (DTD) harus ditulis pada awal
dokumen. Tag ini berfungsi untuk mendeklarasikan tipe dokumen dan versi
HTML yang digunakan untuk diproses pada web browser.
 Tag HTML : Merupakan wadah dari semua elemen html.
 Tag Head : Berisi informasi website yang tidak tampil di halaman web
browser. Misalnya, source css, source js, title, meta charset.
 Tag Body : Berisi semua elemen yang tampil di halaman web browser.
Disinilah bagian dimana semua konten ditulis.

2.3 Java Script

A. Pengertian JavaScript

Java Script adalah bahasa pemrograman populer yang digunakan untuk membuat situs
dengan konten website yang dinamis. Faktanya, ada lebih dari 67,7 persen developer yang
menggunakan JavaScript. Konten dinamis artinya konten dapat bergerak atau berubah di
26
 depan layar tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto, gambar
animasi, pengisian poling, dan lainnya.

JavaScript sendiri sebenarnya biasanya dikolaborasikan dengan HTML dan CSS. Di

mana belajar HTML adalah untuk membuat struktur website dan CSS adalah bahasa untuk
merancang style halaman website. Lalu, JavaScript berperan menambahkan elemen interaktif
untuk meningkatkan engagement pengguna.

Sebagai contoh, ketika memberikan like dan komentar di Twitter. Anda bisa melihat
munculnya jumlah like dan komentar yang terus bertambah secara real time, tanpa direload.

B. Fungsi JavaScript

Fungsi JavaScript cukup banyak, mulai dari membuat tampilan website jadi lebih menarik,
menciptakan aplikasi mobile, mengembangkan game, hingga menjalankan web server.

Berikut adalah penjelasan detail dari masing-masing fungsi JavaScript :

1. Membuat Website Lebih Menarik

Dalam proses website development, JavaScript mampu menyulap website menjadi tampak
lebih menarik dan interaktif, dengan konten-konten dinamisnya.

Misalnya, konten yang bergerak dan memperbarui secara real-time tanpa perlu reload semua
halaman website berkali-kali. Sebagai contoh, Google Maps dengan user experience yang
sangat baik.

realtime tanpa perlu melakukan reload. Hal ini tentu tak bisa dilakukan tanpa menggunakan
JavaScript.

JavaScript awalnya adalah bahasa pemrograman yang hanya bekerja dari sisi klien atau front
end. Artinya proses pengolahan kode hanya akan berjalan di browser.

2. Menciptakan Aplikasi Mobil

Fungsi JavaScript selanjutnya ialah untuk membuat aplikasi mobile. Kalau dulu aplikasi
mobile hanya bisa dikembangkan dengan bahasa pemrograman Java untuk Android.
Sekarang, bahasa pemrograman ini sudah bisa digunakan dalam mobile API untuk membuat
aplikasi mobile.
27
Pun pembuatan aplikasi mobile juga semakin mudah dengan adanya framework JavaScript
khusus aplikasi mobile, seperti React Native. Dengan framework ini, Anda bisa membuat
aplikasi mobile untuk dua sistem operasi sekaligus, yaitu Android dan iOS.

28
3. Mengembangkan Game Berbasis Web Browser
Tak hanya membuat halaman website, JavaScript juga dapat berfungsi untuk
mengembangkan game online berbasis browser. Untuk membuat game browser yang
menarik, bahasa pemrograman JavaScript bisa dikombinasikan dengan HTML5. Beberapa
game populer yang menggunakan JavaScript di antaranya Lord of Ultima dan Flappy Bird.

Pengembangan game berbasis JavaScript ini pun didukung oleh adanya framework
JavaScript khusus game, seperti Playground.js, Panda.js, dan Quintus.

4. Menjalankan Web Server

Terakhir, seiring perkembangannya, bahasa pemrograman JavaScript tak hanya mampu

bekerja di sisi browser saja, tetapi juga di sisi server dengan menggunakan Node.js.

Node.js ini akan mengeksekusi kode JavaScript pada sisi server sehingga dapat menjalankan
situs, aplikasi web, dan game berbasis browser. Node.js juga lebih mampu menangani banyak
proses secara bersamaan, tanpa perlu menunggu satu proses selesai terlebih dulu. Sehingga
proses bisa dilakukan lebih cepat.

C. Cara Kerja JavaScript

Cara kerja JavaScript bisa dilihat dari dua sisi, yaitu dari sisi client dan dari sisi server. Dari
sisi client, JavaScript dapat berperan dalam mengubah tampilan website. Sedangkan dari sisi
server, JavaScript dapat digunakan untuk kebutuhan database.

Berikut adalah penjelasan lebih detail mengenai cara kerja JavaScript di sisi client dan juga
server:

a) Cara Kerja JavaScript di Sisi Client

Kode JavaScript dapat dibuat dalam satu halaman HTML. Jadi, ketika HTML adalah
halaman yang Anda buka, kode akan berjalan secara otomatis. Selain itu, kode bahasa
pemrograman ini juga dapat dibuat pada file terpisah dengan ekstensi .js. Kemudian file
tersebut disisipkan pada kode HTML.

Nantinya kode akan ditulis dengan menggunakan tag <script> dan teks atribut JavaScript.
Berikut contohnya:

<script type = “text/javascript”>

29
Kemudian, agar scriptnya bisa bekerja, masukkan kode JavaScript berikut:

</script>

D. Cara Kerja JavaScript dari Sisi Server

Kalau dari sisi server, JavaScript lebih banyak digunakan untuk kebutuhan database. Cara
kerjanya pun hampir sama dengan bahasa pemrograman sisi server lainnya, seperti C# atau
Java.

Namun, hal yang membedakan adalah JavaScript bekerja secara non-blocking. Artinya.
Ketika program berjalan, program tersebut tak akan berhenti pada satu proses saja. Sistem
akan mulai menyiapkan perintah berikutnya.

Jika proses selanjutnya ternyata diketahui tidak memiliki output, proses tersebut bisa
langsung dijalankan bersamaan dengan proses yang masih berjalan. Jadi, proses pengolahan
data bisa dilakukan jauh lebih efektif. Sebagai contoh cara kerja ini adalah aktivitas streaming
video atau embed YouTube di sebuah website. Selama video berjalan, Anda tetap bisa
mengakses informasi lainnya dalam website tersebut.

E. Kelebihan dan Kekurangan JavaScript

a) Kelebihan Javascript

Selain fungsinya yang beragam, berikut ini beberapa kelebihannya yang membuatnya populer
di kalangan developer:

1, Mudah Dipahami dan Dipelajari

Bahasa pemrograman memiliki tingkat kesulitannya masing-masing. Nah, JavaScript

termasuk salah satu yang mudah untuk dipelajari.

Contoh Bahasa Pemrograman Javascript

console.log('Hello World!')

Contoh Bahasa Pemrograman C++

30
#include <iostream>
using namespace std;
// main() is where program execution begins.
// main() is where program execution begins.
int main() {
cout << "Hello World"; // prints Hello
World return 0;
}

Syntax dari JavaScript jauh lebih sederhana dan lebih mudah untuk dipahami, bukan?

2. Fleksibel Digunakan

Dulu, basis bahasa pemrograman website kebanyakan menggunakan PHP. Sebab semua
logika web dibuat pada sisi server. Oh ya, Anda bisa menyimak pengertian PHP agar lebih
mengenal bahasa tersebut.

3. Beban Server Lebih Ringan

Seperti dijelaskan sebelumnya, ketika pengunjung mengakses website, script akan terunduh
di perangkat klien. Script tersebut kemudian diproses di browser klien. Lalu, browser mulai
menampilkan halaman website.

4. Bisa Digunakan untuk Semua Kebutuhan

JavaScript bisa Anda gunakan untuk berbagai kebutuhan.Tak hanya untuk front-end, bahkan
Anda bisa mengelola server (backend) dengan menggunakan Node.js. Dengan menggunakan
bahasa pemrograman ini.

5. Memiliki Komunitas yang Aktif

Selain mudah dipelajari dan fleksibel, Javascript juga memiliki dukungan komunitas
developer yang aktif. Bisa mendapatkan bantuan dari komunitas jika mengalami kendala
seperti bug saat mengembangkan aplikasi. Jadi, akan lebih mudah menemukan solusinya.

b) Kekurangan Javascript

Berikut ini adalah beberapa kekurangan dari bahasa pemrograman Javascript:

1. Script yang digunakan pada Javascript tidak terenkripsi

31
Meskipun Javascript adalah bahasa pemrograman yang simple dan mudah dikembangkan,
namun ternyata hal ini kontras dengan kemampuan enkripsi dari bahasa pemrograman
Javascript. Aplikasi yang dikembangkan dengan menggunakan bahasa pemrograman berbasis
Javascript memiliki enkripsi yang lemah, dan cenderung tidak terenkripsi.

2. Bukan untuk pengembangan aplikasi stand alone

Merupakan kelemahan, yang juga dampak dari tidak terenkripsinya aplikasi berbasi bahasa
pemrograman Javascript.

3. Memiliki keterbatasan objek

Kelemahan berikutnya dari bahasa pemrograman javascript ini adalah terbatasnya objek.
Hal in ijuga dipengaruhi oleh kondisi umum dari bahasa pemrograman Javascript yang sanga
simple dan juga sederhana.

F. Tipe data JavaScript

Nah, setelah mengenal variabel dalam bahasa pemrograman ini, Anda juga perlu mengenal
tipe data yang akan disimpan di variabel.

Berikut adalah beberapa contoh tipe data dalam Javascript:

1. String atau teks

2. Integer atau Number berupa bilangan bulat
3. Float berupa bilangan pecahan
4. Boolean berupa (true/false)
5. Object berupa semua tipe data

JavaScript ini sebenarnya bersifat dynamic typing. Artinya, tidak harus menuliskan tipe data
saat mengisi variable seperti pada bahasa pemrograman lainnya.

G. Operator

Selanjutnya, Anda perlu memahami apa itu operator di JavaScript. Nah, operator di sini
maksudnya adalah simbol yang dapat menghasilkan nilai baru. Berikut contoh operator yang
bisa Anda gunakan di JavaScript:

 Operator Aritmatika – Simbol yang digunakan untuk menghitung nilai variabel

angka. Terdiri dari simbol penjumlahan (+), pengurangan (-), perkalian (*),
pemangkatan (**), pembagian (/)
 Operator Penugasan – Digunakan untuk memberikan tugas pada variabel, seperti
mengisi nilai variabel. Salah satu simbol penugasan yaitu (=).
 Operator Perbandingan – Operator relasi atau perbandingan merupakan operator
yang digunakan untuk membandingkan dua nilai. Nah, hasil dari perbandingan ini
akan

32
 menghasilkan nilai boolean ‘true’ dan ‘false’. Simbol operator ini diantaranya, (>),
(<), (>=), dan sebagainya.
 Operator Logika – Terakhir, operator logika. Operator ini digunakan untuk
melakukan operasi terhadap nilai boolean. Simbol dari operator ini adalah logika
AND (&&), logika OR (||), dan negasi (!)

2.4 PHP

O. Pengertian PHP

PHP (Hypertext Preprocessor) adalah sebuah bahasa pemrograman server side scripting yang
bersifat open source. Sebagai sebuah scripting language, PHP menjalankan instruksi
pemrograman saat proses runtime. Hasil dari instruksi tentu akan berbeda tergantung data
yang diproses.

PHP merupakan bahasa pemrograman server-side, maka script dari PHP nantinya akan
diproses di server. Jenis server yang sering digunakan bersama dengan PHP antara
lain Apache, Nginx, dan LiteSpeed. Selain itu, PHP juga merupakan bahasa pemrograman
yang bersifat open source. Pengguna bebas memodifikasi dan mengembangkan sesuai dengan
kebutuhan mereka.

P. Fungsi PHP

Secara umum, fungsi PHP adalah digunakan untuk pengembangan website. Baik website
statis seperti situs berita yang tidak membutuhkan banyak fitur. Ataupun website dinamis
seperti toko online dengan segudang fitur pendukung. Namun, penggunaan PHP tidak
terbatas pada pengembangan website saja, lho. Karena fleksibilitasnya yang tinggi, PHP juga
bisa digunakan untuk membuat aplikasi komputer sekalipun.

Q. Sintaks Dasar PHP

Setiap bahasa pemrograman memiliki aturan coding sendiri. Begitu pula dengan PHP.
Sintaks dasarnya dibuka dengan <?php dan ditutup dengan ?> sebagai terlihat di contoh
berikut:

1<?php
2echo “Selamat datang”
3;?>

Inilah penjelasan kode tersebut:

 <?php ini adalah kode wajib untuk membuka program PHP.

 Echo adalah sebuah perintah untuk menampilkan teks.
 “Selamat Datang”; teks yang hendak ditampilkan dan ditulis diantara tanda petik dan
titik koma.
 ?> adalah kode untuk mengakhiri PHP dan wajib digunakan saat digabung dengan
bahasa pemrograman lain seperti HTML.

Sintaks PHP bersifat case sensitive. Jadi, penggunaan huruf besar atau kecil akan turut
mempengaruhi output yang diberikan. Sebagai contoh :

33
1<?php
2$alamat = “Yogyakarta”;
3echo $alamat;
4?>

Kode di atas akan menghasilkan output: Yogyakarta di halaman website.

Namun, jika dituliskan seperti ini:

1<?php
2$alamat = “Yogyakarta”;
3echo $Alamat;
4?>

Anda akan mendapati tampilan error. Alasannya, adanya perbedaan antara

variabel $alamat dan $Alamat.

Pada PHP, Anda juga bisa menuliskan komentar sebagai penjelasan dari kode yang ditulis.
Komentar di PHP menggunakan // atau */ dan tidak akan dimunculkan sebagai output di
browser. Contohnya sebagai berikut:

1<?php
2// ini contoh penggunaan komentar
3echo "Apa Kabar?";
4/*
5Nah ini juga contoh komentar
6yang ditulis
7lebih dari satu baris
8*/
9?>

Semua kode PHP yang ditulis harus disimpan dengan file ekstensi .php.

R. Contoh Kode PHP

Nah, setelah belajar tentang sintaks dasar PHP, mari lihat contoh kode PHP dalam
penggunaan dengan bahasa pemrograman lainnya.

1. HTML

Anda bisa menyisipkan kode PHP di dalam HTML menggunakan PHP editor favorit Anda.
Contoh penggunaan kode PHP di HTML adalah sebagai berikut:

1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Contoh</title>

34
 5 </head>
6 <body>
7
8 <?php
9 echo "Halo, Selamat Siang";
10 ?>
11 </body>
12</html>

Kode di atas akan memunculkan hasil pada browser:

Seperti terlihat kode PHP disisipkan di dalam body HTML. Dengan perintah echo, browser
memunculkan hasil teks yang diinstruksikan.

2. CSS

Contoh penggunaan gabungan dengan HTML dan CSS adalah sebagai berikut:

1<!DOCTYPE html>
2<html>
3<body>
4<head>
5 <style>
6 h2{ color:w
7 hite;
8 background-color:red;
9 padding:5px;
10 }
11 p{ color:bl
12 ue;
13 }
14 </style>

35
15 <?php
16 echo "<h1>Selamat Datang</h1>";
17 echo "<p>Semoga Harimu Menyenangkan</p>";
18 ?>
19</body>
20</html>
21

Ketika digunakan bersama dengan CSS, output yang diberikan tentu memiliki atribut CSS
seperti warna dan ukuran font yang berbeda sebagai berikut:

3. JavaScript

Contoh penggunaan kode gabungan dengan JavaScript adalah sebagai berikut:

1<!DOCTYPE html>
2<html>
3<body>
4 <h2>Selamat Datang<br>
5 Semoga Harimu Menyenangkan</h2>
6 <b>Ini adalah Contoh Gabungan PHP dan Javascript </b>
7 <br>
8
9 <p id="demo">PHP Dasar</p>
10
11 <button type="button" onclick="myFunction()">Coba Klik</button>
12
13 <script tipe="text/Javascript">
14 function myFunction() {
15 <?php
16 $str= "Ini Hanya Contoh";

36
17 echo "document.getElementById('demo').innerHTML = '$str';";
18 ?>
19 }
20 </script>
21</body>
22</html>

Berdasarkan kode-kode di atas, browser akan menampilkan output sebagai berikut:

4. Gabungan

Jika digunakan bersama dengan HTML, CSS dan JavaScript sekaligus, contoh kode yang
digunakan adalah sebagai berikut:

1<!DOCTYPE html>
2<html>
3<body>
4<head>
5 <style>
6 h2{
7 color:white;
8 background-color:red;
9 padding:5px;
10 }
11 p{ color:bl
12 ue;
13 }
14 </style>
15</head>

37
16
17<h2>Ini merupakan contoh<br>
18Penggabungan CSS, HTML, dan Javascript</h2>
19<b>Dengan PHP </b>
20<br>
21
22<p id="demo">Contoh</p>
23
24<button type="button" onclick="myFunction()">Coba Klik</button>
25
26<script tipe="text/Javascript">
27function myFunction() {
28 <?php
29 $str= "Ini Paragraf dengan variabel PHP di dalam Javascript";
30 echo "document.getElementById('demo').innerHTML = '$str';";
31 ?>
32}
33</script>
34
35</body>
36</html>

Berikut ini tampilannya di browser:

S. Penulisan Kode-Kode PHP

38
Anda baru saja belajar contoh kode PHP. Pada dasarnya, penulisan kode bahasa
pemrograman ini terbagi dua :

1. PHP Native

Native adalah penulisan kode PHP dari nol ketika melakukan perancangan sebuah website.
PHP Native sering digunakan oleh developer yang memiliki keahlian coding cukup baik atau
mereka yang ingin membuat kerangka alur yang unik dengan fungsionalitas tinggi.

2. PHP Framework

Ketika menggunakan framework, developer dapat memanfaatkan kerangka pengelolaan

website yang sudah jadi. Artinya, tidak perlu membuatnya dari awal sehingga memudahkan
pekerjaan. Framework adalah kerangka kerja yang dapat membantu developer bekerja lebih
efisien dan menyelesaikan pengembangan website lebih cepat.

Beberapa Framework PHP yang populer digunakan antara lain: CodeIgniter, framework
Laravel, Yii, Symfony dan Zend Framework.

T. Mengapa Menggunakan PHP?

Saat ini, tak kurang dari 78% website di seluruh dunia menggunakan bahasa pemrograman
yang diciptakan Rasmus Lerdorf di tahun 1995 ini. Bahkan platform besar
seperti Facebook juga menggunakannya.

Lalu, apa yang membuat PHP begitu populer? Mengapa menggunakan PHP yang sudah
berumur lebih dari dua dekade ini? Berikut beberapa alasannya:

 Cenderung mudah dipelajari — dibanding beberapa bahasa pemrograman populer

lain, PHP lebih mudah dipelajari.
 Materi belajar yang melimpah — umur PHP yang “cukup tua” menyebabkan
banyak sekali dokumentasi, panduan, dan komunitas aktif bertebaran di jagat maya.
Jadi, tak perlu takut jika Anda mengalami kesulitan.
 PHP bersifat open-source — siapapun bisa menggunakan PHP tanpa mengeluarkan
biaya sepeserpun.
 Kecepatan tinggi — PHP terbukti bisa meningkatkan kecepatan loading dibanding
bahasa lain. Misalnya, lebih cepat tiga kali daripada Phyton pada beberapa kasus.
 Banyaknya pilihan database — PHP bisa digunakan di hampir semua jenis
database. Mulai dari MySQL, hingga non-relational database seperti Redis.
 Kompatibilitas yang baik dengan HTML — script PHP tidak mengganggu HTML
sama sekali. Justru mereka berdua saling melengkapi.
 Fleksibilitas tinggi — PHP bisa dikombinasikan dengan banyak sekali bahasa
pemrograman lain. Sehingga bisa Anda gunakan sesuai kebutuhan.
 Multi-platform — PHP bisa Anda gunakan di macam-macam operating system.
Mulai dari Windows, Linux, hingga MacOS.

39
  Selalu diperbarui — sejak pertama kali muncul tahun 1995, sekarang PHP sudah
berada pada versi 7.4.
 Mendukung layanan cloud — siapa sangka, walaupun umur PHP hampir dua
dekade, tapi ia bisa mendukung layanan cloud dengan skalabilitas yang baik.

U. Kekurangan PHP

Meskipun PHP memiliki banyak kelebihan yang menarik seperti yang disebutkan diatas, tapi
tidak dipungkiri bahwa terdapat beberapa kekurangan yang mungkin dapat membuat Anda
mempertimbangkan kembali menggunakan bahasa pemrograman ini, diantaranya seperti :

 Keamanan yang kurang terjamin

Bersifat open source belum tentu baik karena PHP dari segi keamanan tidak cukup
aman karena semua orang dapat melihat file teks ASCII Anda yang tersedia dengan
mudah.

 Tidak sesuai untuk pengembangan aplikasi web yang besar dan kompleks
Jika Anda ingin mengembangkan aplikasi web dengan konten yang sangat besar,

 Perfoma yang lemah

Sayangnya PHP tidak mendukung penggunaan banyak fitur dalam satu waktu. Jika
Anda mencoba menggunakan beberapa fitur dari framework atau tools tertentu, maka
akan menyebabkan perfomansi yang buruk saat Anda telah mengembangkan aplikasi
online.

 Tidak sesederhana bahasa pemrograman terkini

Meskipun PHP merupakan bahasa pemrograman yang masuk dalam kategori populer
dan cukup kuat, namun terdapat banyak bahasa pemrograman lainnya yang lebih
mudah digunakan untuk pengembangan aplikasi web.
Kekurangan lainnya adalah PHP tidak memberikan izin untuk mengubah behavior inti
dari aplikasi online. Sehingga jika Anda memiliki beberapa fungsi yang lebih
kompleks, Anda mungkin memerlukan tambahan bahasa pemrograman lainnya.

 Cara melakukan Handling Error yang kurang tangguh

Banyak developer yang telah menemukan celah pada code PHP sehingga rentan
terhadap handling error karena kurangnya alat untuk melakukan debugging dan
peringatan error.

2.5 MYSQL

A. Pengertian MYSQL

40
MySQL adalah sebuah database management system (manajemen basis data) menggunakan
perintah dasar SQL (Structured Query Language) yang cukup terkenal. Database
management system (DBMS) MySQL multi pengguna dan multi alur ini sudah dipakai lebih
dari 6 juta pengguna di seluruh dunia.

MySQL adalah DBMS yang open source dengan dua bentuk lisensi, yaitu Free Software
(perangkat lunak bebas) dan Shareware (perangkat lunak berpemilik yang penggunaannya
terbatas). Jadi, MySQL adalah database server yang gratis dengan lisensi GNU General
Public License (GPL) sehingga dapat Anda pakai untuk keperluan pribadi atau komersil
tanpa harus membayar lisensi yang ada.

B. Sejarah MySQL

MySQL adalah pengembangan lanjutan dari proyek UNIREG yang dikerjakan oleh Michael
Monty Widenius dan TcX (perusahaan perangkat lunak asal Swedia).

Sayangnya, UNIREG belum terlalu kompatibel dengan database dinamis yang dipakai di
website. TcX kemudian mencari alternatif lain dan menemukan perangkat lunak yang
dikembangkan oleh David Hughes, yaitu miniSQL atau mSQL. Namun, ditemukan masalah
lagi karena mSQL tidak mendukung indexing sehingga belum sesuai dengan kebutuhan TcX.

Pada akhirnya muncul kerjasama antara pengembang UNIREG (Michael Monty Widenius),
mSQL (David Hughes), dan TcX. Kerjasama ini bertujuan untuk mengembangkan sistem
database yang baru, dan pada 1995 dirilislah MySQL seperti yang dikenal saat ini. Saat ini
pengembangan MySQL berada di bawah Oracle.

C. Fungsi-fungsi di MySQL Server

Jika MySQL sudah dapat berjalan dengan baik di server atau perangkat, ada beberapa fungsi
yang bisa Anda jalankan menggunakan teks perintah (command prompt). Untuk masuk ke
dalam MySQL server buka ‘CMD’ di Windows dan ‘Terminal’ di Linux.

D. Mengenal SQL

SQL merupakan bahasa pemrograman yang perlu Anda pahami karena dapat merelasikan
antara beberapa tabel dengan database maupun antar database. Ada tiga bentuk SQL yang
perlu Anda ketahui, yaitu Data Definition Language (DDL), Data Manipulation
Language(DML), dan Data Control Language (DCL).

CREATE Dipakai untuk membuat tabel dan database.

41
 DROP Dipakai untuk menghapus database dan tabel.

Dipakai untuk mengubah struktur tabel yang sudah ada.

Alter dapat mengganti field menggunakan perintah “Change”,

ALTER
menambahkan field menggunakan perintah “Add”, atau menghapus field
menggunakan perintah “drop”, dan mengubah namanya menggunakan
perintah “Rename”.

 Data Definition Language (DDL)

DDL berguna pada saat Anda ingin mendefinisikan data di dalam database. Terdapat
beberapa query yang dikelompokkan ke dalam DDL, yaitu:

Argumen DDL di atas perlu Anda pahami karena merupakan dasar penggunaan SQL di
bagian awal pembuatan database. Contohnya saja jika belum menjalankan perintah
“CREATE”, Anda belum bisa melanjutkan penggunaan argumen yang lainnya.

 Data Manipulation Language (DML)

DML dapat Anda pakai setelah menjalankan perintah DDL. DML berfungsi untuk
memanipulasi, mengubah, atau mengganti isi dari database (tabel) yang sudah ada.

Terdapat beberapa perintah DML yang perlu Anda ketahui, yaitu:

INSERT Dipakai untuk memasukkan data ke dalam tabel pada database.

UPDATE Dipakai untuk mengubah data yang ada di dalam tabel pada database.

DELETE Dipakai untuk menghapus data di dalam tabel pada database.

E. Kelebihan dan Kekurangan MYSQL

 Kelebihan MySQL

1. Mendukung Integrasi Dengan Bahasa Pemrograman Lain.

Website atau perangkat lunak terkadang dikembangkan dengan menggunakan berbagai

macam bahasa pemrograman, jadi Anda tidak perlu khawatir jika menggunakan MySQL.

42
2. Tidak Membutuhkan RAM Besar.

MySQL dapat dipasang pada server dengan spesifikasi kecil. Jadi tidak perlu khawatir jika
Anda hanya mempunyai server dengan kapasitas 1 GB karena Anda masih bisa menggunakan
MySQL sebagai database Anda.

3. Mendukung Multi User.

MySQL dapat dipakai oleh beberapa user dalam waktu bersamaan tanpa membuatnya crash
atau berhenti bekerja.

4. Bersifat Open Source

MySQL adalah sistem manajemen database gratis. Meskipun gratis, bukan berarti database
ini mempunyai kinerja buruk. Apalagi lisensi gratis yang dipakai adalah GPL di bawah
pengelolaan Oracle sehingga kualitasnya termasuk baik.

5. Struktur Tabel yang Fleksibel.

MySQL mempunyai struktur tabel yang mudah dipakai dan fleksibel. Contohnya saat
MySQL memproses ALTER TABLE dan lain sebagainya. Jika dibandingkan dengan
database lain seperti Oracle dan PostgreSQL, MySQL tergolong lebih mudah.

6. Tipe Data yang Bervariasi.

Kelebihan lain dari MySQL adalah mendukung berbagai macam data yang bisa Anda
gunakan di MySQL. Contohnya float, integer, date, char, text, timestamp, double, dan lain
sebagainya.

7. Keamanan yang Terjamin.

Open source bukan berarti MySQL menyediakan keamanan yang buruk. Malah sebaliknya,
MySQL mempunyai fitur keamanan yang cukup apik.

 Kekurangan MySQL

1. Kurang Cocok untuk Aplikasi Game dan Mobile

Anda yang ingin mengembangkan aplikasi game atau perangkat mobile ada baiknya jika
mempertimbangkan lagi jika ingin menggunakan MySQL.

2. Sulit Mengelola Database yang Besar

Jika Anda ingin mengembangkan aplikasi atau sistem di perusahaan dengan database yang
cukup besar, ada baiknya jika menggunakan database manajemen sistem selain MySQL.

3. Technical Support yang Kurang Bagus

Sifatnya yang open source terkadang membuat aplikasi tidak menyediakan technical support
yang memadai. Technical support MySQL diklaim kurang bagus.

43
 Bab III

Pembahasan

3.1 Kesimpulan

Tidak terlalu sulit untuk membuat halaman web desain bersama-sama HTML, CSS,
JavaScript, PHP dan MySQL. MySQL sebagai mesin penyimpan data. HTML, CSS, dan
Javascript adalah bahasa browser Anda alias Client Side.

Hanya dengan menggunakan file HTML dan CSS saja, sekarang bisa membuat website
portfolio sendiri. Jika sudah bisa membuat website dengan HTML dan CSS, tentunya perlu
layanan hosting yang dapat diandalkan agar website bisa diakses semua orang.

Belajar JavaScript sebenarnya tidaklah terlalu sulit, mengingat JavaScript adalah bahasa
pemrograman yang mudah untuk dipelajari. Kuncinya adalah giat mempelajari dan terus
berlatih.

Pada penggunaannya, PHP bisa digabungkan dengan bahasa pemrograman lain, seperti
HTML, CSS, dan Javascript seperti contoh di atas. Bahkan, bahasa permrograman ini juga
mampu bekerja dengan baik bersama MySQL, sebagai sebuah sistem database.

Bahasa PHP adalah bahasa pemrograman pada server-side yang artinya berjalan pada sisi
server website yang bersifat open-source sehingga Anda dapat melakukan download secara
gratis di manapun. Selain itu pengembangan bahasa ini membuatnya memiliki beberapa
kelebihan seperti stabil karena banyak developer yang telah mengembangkannya menjadi
lebih baik, gratis sehingga Anda yang memulai belajar bahasa pemrograman tidak perlu
mengeluarkan biaya, hingga meningkatkan peluang kerja Anda.

MySQL adalah sebuah sistem manajemen database yang berguna untuk mengelola database
di dalam website. Sistem manajemen database dengan mysql mempunyai banyak fitur. Selain
itu, proses instalasi sampai dengan penggunaannya sangat mudah sehingga bagi pengguna
yang masing awam pun mungkin akan cepat untuk memahaminya. MySQL menggunakan
bahasa pemrograman SQL untuk bekerja. Bahasa pemrograman ini mempunyai beberapa
fungsi dan perintah yang dapat dipakai untuk menambahkan, mengubah, dan mengelola
berbagai macam tipe data seperti integer, float, string, dan semacamnya.

44
 DAFTAR PUSTAKA

 https://sis.binus.ac.id/2019/02/25/hubungan-dan-perbedaan-javascript-html-css-
jquery-dan-php-di-dalam-web-development/
 https://www.niagahoster.co.id/blog/pengertian-css/
 https://www.niagahoster.co.id/blog/pengertian-php/
 https://dosenit.com/kuliah-it/pemrograman/kelebihan-dan-kekurangan-javascript
 https://idcloudhost.com/php-defisini-kelebihan-dan-kekurangannya/
 https://www.niagahoster.co.id/blog/mysql-adalah/
 https://www.niagahoster.co.id/blog/contoh-html/#1_HTML_Basic
 https://www.niagahoster.co.id/blog/javascript-adalah/
 https://iddev.wordpress.com/2009/07/12/kelebihan-dan-kekurangan-dari-css/
 https://www.jetorbit.com/blog/bagaimana-cara-kerja-html-css-javascript-php-dan-
mysql/
 https://www.niagahoster.co.id/blog/html-adalah/


45