MAKALAH

Pemograman II
“Dasar-dasar Html, PHP, JavaScript, UI/UX,Database”

Nama : Vivi Oktavilianda

NIM : 211400012

UNIVERSITAS METAMEDIA
Padang
2023
 Pemrograman 2 Vivi Oktavilianda

KATA PENGANTAR

Pertama-tama tak lupa saya panjatkan puji syukur kehadirat Allah Tuhan Yang Maha
kuasa. Karena hanya dengan ridhoNyalah saya dapat menyelesaikan makalah ini. Dan tak
lupa saya sampaikan terima kasih kepada semua pengajar saya yang telah berjasa membuat
saya memiliki kemampuan seperti ini.
Tujuan makalah ini sebenarnya adalah untuk membantu Dalam Makalah “Dasar-
dasar Html , Dasar-dasar PHP,Dasar-dasar JavaScript, Dasar-dasar UI/UX,Dasar-
dasar database ” ini anda akan diajarkan pengetahuan dasar hingga tingkat menengah
bagaimana membuat sebuah website dengan cepat. Dalam makalah ini anda tidak diajarkan
untuk menggunakan software yang bersifat WYSIWYG (What You See Is What You Get)
seperti FrontPage atau DreamWeaver.
Penulis sadar bahwa masih banyak kekurangan yang terdapat pada makalah ini. Untuk
itu penulis mengharapkan saran dan kritik dari pembaca. Mudah-mudahan dengan hadirnya
makalah ini dapat memajukan dan meningkatkan SDM Indonesia khususnya dalam bidang TI.

Padang, Maret 2023

Penulis

i
 Pemrograman 2 Vivi

DAFTAR ISI
KATA PENGANTAR..........................................................................................i
DAFTAR ISI.........................................................................................................ii
DAFTAR GAMBAR............................................................................................iii
DAFTAR TABEL.................................................................................................iv
BAB I PENDAHULUAN.....................................................................................1
1.1 Latar Belakang............................................................................................1
1.2 Rumusan Masalah......................................................................................2
1.3 Tujuan Penulisan........................................................................................2
1.3.1 Tujuan Khusus.................................................................................2
1.3.2 Tujuan Umum.................................................................................2
1.4 Manfaat Penulisan......................................................................................3
1.5 Metode Penulisan.......................................................................................3
1.6 Sistematika Penulisan.................................................................................3
BAB II PEMBAHASAN HTML.........................................................................5
2.1 Pengertian HTML.......................................................................................5
2.2 Penggunaan Tag pada HTML....................................................................5
2.3 Daftar Tag pada HTML..............................................................................6
BAB III PEMBAHASAN PHP............................................................................12
3.1 Pengertian PHP...........................................................................................12
3.2 Fungsi PHP.................................................................................................12
3.3 Sintaks Dasar PHP......................................................................................12
BAB IV PEMBAHASAN JAVASCRIPT...........................................................19
4.1 Pengertian Javascript..................................................................................19
4.2 Bagaimana cara menulis kode javascript di HTML...................................23
BAB V PEMBAHASAN UI/UX..........................................................................26
5.1 Pengertian UI/UX.......................................................................................26
5.2 Prinsip UI/UX.............................................................................................27
5.3 Proses Kreatif UI/UX.................................................................................28
5.4 Alur Kerja UI/UX.......................................................................................28

i
 Pemrograman 2 Vivi
BAB VI PEMBAHASAN DATABASE..............................................................31
6.1 Pengertian Database...................................................................................31
6.2 Bagian dari database Access......................................................................32
BAB VII PENUTUP.............................................................................................36
7.1 Kesimpulan.................................................................................................36
7.2 Saran...........................................................................................................36

i
 Pemrograman 2 Vivi

BAB I
PENDAHULUAN

1.1 Latar Belakang

Pada awalnya HTML hanyalah halaman-halaman berformat yang bisa dilihat oleh
sedikit program browser. Sasaran awal HTML adalah menyajikan informasi teks yang
memungkinkan pengguna terhubung atau beralih ke halaman-halaman web lainnya atau
yang biasa disebut Hyperlink diantara isi dari website. Sekarang ini HTLM tidak hanya
mampu memformat teks namun juga menyajikan grafik dan mengatur form-form data.
Kebehatan lain HTML adalah semua komputer dengan web browser dapat membaca
dan menafsirkan kode HTML terhadap halaman-halaman web yang mereka akses.
Sebelum internet populer, orang mengirim data atau sebuah file teks ke seorang teman
melalui sebuah jaringan. Anda bisa mengirim file teks atau grafik, atau anda dapat
mendownload sebuah file musik dari sebuah sistem bulletin board elektronik ( BBS ).
Sekarang, anda masih bisa mendownload file-file dalam berabagai macam format, namun
selain itu anda bisa menerima sebuah file berbasis HTML saat menampilkan sebuah
halaman web. Salah satu keuntungan dari mengirimkan HTML melalui sebuah koneksi,
termasuk file-file data individu, adalah bahwa kode-kode HTML menjalin semua elemen
data lainnya yang bersama dengan memformat mereka kedalam sebuah halaman web yang
bisa dibaca atau digunakan.
HTML(Hyper Text Markup Language) adalah sekumpulan symbol-simbol atau tag-
tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman
pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman
web dengan lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag
HTML seperti b, i, u dan sebagainya.
Untuk mempelajari ebook ini anda hanya memerlukan:Text Editor (Notepad, vi, emacs,
dsb), Web Browser (Internet Explorer, Opera, FireFox, dsb).
Hanya dengan bermodalkan dua software bawaan Windows itu saja anda sudah
dapat membuat website. Namun Notepad memiliki kekurangan yaitu tidak memiliki
syntax highlighting (pewarnaan kode) sehingga relatif cukup menyulitkan.

1
 Pemrograman 2 Vivi

Untuk itu saya merekomendasikan pada anda untuk menggunakan “PHP

DESIGNER 2006”. Kelebihan software ini adalah ia memiliki banyak macam syntax
highlighting mulai dari HTML, PHP, JAVA dan masih banyak lagi. Namun yang
terpenting dari software ini sifatnya FREE. Anda dapat mendownload “PHP DESIGNER
2006” di alamat:
http://www.mpsoftware.dk/.
NB: Jika anda menggunakan notepad sebagai editor. Pastikan ketika hendak
menyimpan file pilihan Save As Type-nya adalah All Files. Hal ini untuk menghindari
tersimpannya script kita sebagai file text biasa.
Kita asumsikan anda sebagai orang awam yang belum mengenal sama sekali HTML. Jika
anda menggunakan program semacam ini dan hanya drag n drop saja tanpa mengerti
kodenya maka sama saja anda tidak menguasai teknik pemrograman web secara nyata.
Ini akan mempersulit anda jika nanti anda mempelajari bahasa web progromming
seperti Java atau PHP. Oleh karena itu, dalam materi yang kita bahas dalam ebook ini
menggunakan “PHP Designer 2006” yang sifatnya hanya syntax highlighting. Namun
setelah membaca e-book ini dan menguasai HTML anda tentu sudah mengerti dan tidak
bingung ketika menggunakan program WYSIWYG.
1.2 Rumusan Masalah
1. Apa yang dimaksud dengan HTML?
2. Apa yang dimaksud dengan Atribut pada HTML?
3. Apa yang dimaksud tag pada HTML?
4. Bagaimana penggunaan tag dan atribut pada HTML?
5. Bagaimana cara membuat website pribadi?
6.Bagaimana cara mengupload file ke
server?
1.3 Tujuan Penulisan
1.3.1 Tujuan Umum
Tujuan pembuatan makalah ini sebenarnya adalah untuk membantu anda yang yang
belum mengenal sama sekali kode HTML atau sudah mengetahui HTML secara
garis besar dan ingin menambah kemampuan.
1.3.2 Tujuan Khusus
1. Diharapkan dapat mengetahui lebih jauh mengenai HTML.
2. Diharapkan pembaca dapat mengaplikasikan penggunaan tag dan atribut pada
HTML.
2
 Pemrograman 2 Vivi

3. Diharapkan dapat membuat website sendiri menggunakan HTML.

4. Diharapkan paham dalam pengaplikasian atribut pada masing-masing tage.
5. Selain bisa menbuat web sendiri pembaca diharapkan bias menguploakan filenya
sendiri ke server.
6. Menyewa webhosting sendiri dari server.

1.4 Manfaat Penulisan

Penulisan makalah ini diharapkan bermanfaat bagi pihak pembaca atas pengetahuan
lebih lanjut tentang HTML dan pembaca dapat mengerti mengenai penggunaan tag
beserta atributnya sehingga bias dalam pengaplikasiannya.

1.5 Metode Penulisan

Metode penulisan yang dilakukan oleh penulis dalam mengumpulkan data sebagai
bahan makalah ini ialah metode studi pustaka, yaitu dengan cara membaca buku, dari
internet dan mencari literature yang berhubungan dengan masalah yang akan dibahas.
1.6 Sistematika Penulisan
Sistematika penulisan yang digunakan adalah sebagai berikut:
1.6.1 BAB I PENDAHULUAN
Pada Bab ini memuat latar belakang, rumusan masalah, tujuan penulisan(Tujuan
umum dan Tujuan Khusus), manfaat penulisan, metode penulisan, dan sistematika
penulisan.
1.6.2 BAB II LANDASAN TEORI
Pada bab ini memuat tentang pengertian HTML, cara penggunaan tag pada HTML,
dan daftar tag pada HTML.
1.6.3 BAB III PEMBAHASAN
Pada bab ini memuat tentang penggunaan atribut dari tag, contoh penggunaan tag
dan atribut, tahap persiapan pembuatan website, sketsa proyek, langkah-langkah
membuat website pribadi (personal homepage), pengertian upload, menyewa web
hosting, tahap persiapan mengupload, dan langkah-langkah mengupload file ke
server.

3
 Pemrograman 2 Vivi

BAB II

PEMBAHASAN HTML

2.1 Pengertian HTML

Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup

Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang

dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu

diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan

sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>,

<input> dan lainnya.

Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML

selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah

naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang

berformat HTML.Pengertian Teknologi Informasi

2.2 Cara Menggunakan Tag pada HTML

Tabel 2.1 Contoh Penggunaan HTML

No Contoh Hasil

1. <b>Ini tulisan tebal</b> Ini tulisan tebal

2. <i>Ini tulisan miring</i> Ini tulisan miring

3 <u>Ini tulisan bergaris bawah</u> Ini tulisan bergaris bawah

4 Ini baris 1<br>Ini baris 2 Ini baris 1

Ini baris 2

5 Ini garis horizontal <hr> Ini garis horizontal

5
 Pemrograman 2 Vivi

Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>,

<input> dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut:

color, size, face

Untuk lebih memahami atribut lihatlah contoh berikut ini.

<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan

berukuran 12 pt</font>

Hasil Ini Font Arial berwarna merah dan berukuran 12 pt

1. Atribut color digunakan untuk menentukan warna tulisan.

2. Atribut face digunakan untuk menentukan jenis huruf.

3. Atribut size digunakan untuk menentukan ukuran huruf.

2.3 Daftar Tag pada HTML

Berikut ini adalah tabel tag-tag HTML dan fungsinya:

Tabel 2.2 Tag Utama

Tag Atribut Deskripsi

<html>

Baris paling atas dari setiap file HTML

</html>

<head>

Informasi umum dari sebuah halaman web

</head>

<title>

Judul halaman. Terdapat pada head

</title>

background

6
 Pemrograman 2 Vivi

bgcolor

bgsound

font

<body> Link

</body> Alink Settingan atribut untuk seluruh dokumen.

Vlink

Topmargin

Leftmargin

Marginheight

marginwidth

Tabel 2.3 Tag Modifikasi teks

Tag Deskripsi Contoh

<b> </b> Teks tebal Teks tebal

<i> </i> Teks miring Teks miring

<u></u> Teks garis bawah Teks garis bawah

<pre></pre> Preformatted teks Contoh teks

<h1></h1> Header 1 Header 1

<h2></h2> Header 2 Header 2

<h3> </h3> Header 3 Header 3

<h4> </h4> Header 4 Header 4

<h5> </h5> Header 5 Header 5

<h6> </h6> Header 6 Header 6

 Subscript Sub script

7
 Pemrograman 2 Vivi

 Superscript Super

script

Tabel 2.4 Tag Font

Tag Atribut Deskripsi

Color

<font> Size Mengubah gaya suatu huruf

</font> name

Tabel 2.5 Tag Link

Tag Atribut Deskripsi

Href

Target

style Membuat link ke dokumen atau

<a></a> class situs lainnya.

name

id

Tabel 2.6 Tag Gambar

Tag Atribut deskripsi

Src

<img> Alt

Name Menampilkan sebuah gambar.

Border

Height

weight

8
 Pemrograman 2 Vivi

Tabel 2.7 Tag Formating

Tag Deskripsi contoh

<blockquote> Digunakan untuk mengatur Sample of text in a block quote
</blockquote> text dan gambar dalam suatu format
tag

<ul> </ul> Unordered List (digunakan • item 1

dengan
<li>)

<ol> </ol> Ordered List (digunakan Item 1

dengan <li>
<li>
Elemen List
<dd> </dd>
Definition List Sample text
<dt>
Definition Term Sample text
<dd>
Definition Description Sample text

Sample
<p></p>
Paragraf Text
<br>
Ganti baris Sample
<hr> Garis horizontal Text
<center> Menengah elemen
</center> Sample

Tabel 2.8 Tag Table

Tag atribut Deskripsi

border
cellpadding
cellspacing
width
height
name
<table></table> id Mengatur semua elemen table
title
bgcolor
background
align
valign
height
bgcolor
<tr> </tr> background Membuat baris baru
align
valign

9
 Pemrograman 2 Vivi

title
colspan
rowspan
height
width
bgcolor
background
<td></td> align Membuat kolom
valign
title
colspan
rowspan
height
width
<th></th> align Header(kepala tabel). Otomatis
valign ke tengah dan tebal.
bgcolor
background
height
width
<tbody></tbody> align Format yang berlaku bagi cell
valign yang diapit tag.
bgcolor
background
height
width
<colgroup> align Format yang berlaku bagi
</colgroup> valign kolom
bgcolor
background
colspan

Tabel 2.9 Tag form

Tag Atribut Deskripsi

<form> method
</form> action Mengatur elemen dari form
name

text
password
hidden
<input type=> radio Variasi dari tipe elemen form
checkbox
submit
image
reset
name

1
 Pemrograman 2 Vivi

text value Sample tex

width
maxlength
name
password value
width ***********
maxlength
hidden name Digunakan untuk membuat variable
value hidden.
radio name Radio 1
value
name Radio 2
checkbox value
checked Check 1
submit value Check 2
src Tombol
height
image width
reset alt
name
border
<select> value Reset
</select> name
size Membuat combo-box. Digunakan
selected bersama dengan option
<option> name Option 1
<textarea></textarea> value <f ont f ace="Arial, Helvetica,
name sans-serif ">Text
rows area box. Text is typed betw ee
cols the tags</f ont>
wrap wrap no wrap
word wrap, sent as one line
off word wrap, sent with breaks
virtual
physical

1
 Pemrograman 2 Vivi

BAB III

PEMBAHASAN PHP

3.1 Pengertian PHP,

Dalam pengembangan website, PHP adalah salah satu bahasa

pemrograman yang wajib dipelajari. Alasannya, bahasa pemrograman ini mampu
untuk membuat website menjadi dinamis. Nah, dalam artikel ini, Anda akan belajar
tentang PHP secara lebih dalam. Kami akan membahas mengenai syntax dasar PHP
beserta contoh-contohnya. Selain itu, kami juga akan membahas tentang hubungan
PHP dengan MySQL.

Pasti sudah semakin penasaran kan dengan pembahasannya? Sebelum itu,

mari pahami dulu pengertian dan fungsi PHP. 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

3.2 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.

3.3 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
2 echo “Selamat datang”;
3 ?>

Inilah penjelasan kode tersebut:

1
 Pemrograman 2 Vivi

 <?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 :

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

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

Namun, jika dituliskan seperti ini:

1 <?php
2 $alamat = “Yogyakarta”;
3 echo $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
3 echo "Apa Kabar?";
4 /*
5 Nah ini juga contoh komentar
6 yang ditulis
7 lebih dari satu baris
8 */
9 ?>

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

Contoh Kode PHP

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

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>
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{

1
 Pemrograman 2 Vivi

12 color:blue;
13 }
14 </style>
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";
17 echo "document.getElementById('demo').innerHTML = '$str';";
18 ?>
19 }
20 </script>
21 </body>
22 </html>

1
 Pemrograman 2 Vivi

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>
16
17 <h2>Ini merupakan contoh<br>
18 Penggabungan 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">
27 function myFunction() {
28 <?php
29 $str= "Ini Paragraf dengan variabel PHP di dalam Javascript";
30 echo "document.getElementById('demo').innerHTML = '$str';";

1
 Pemrograman 2 Vivi

31 ?>
32 }
33 </script>
34
35 </body>
36 </html>

Berikut ini tampilannya di browser:

Penulisan Kode-Kode PHP

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.

1
 Pemrograman 2 Vivi

Jika Anda sudah mahir PHP native, sangat disarankan untuk mencoba beralih ke PHP
framework. Itu karena kode pada framework sudah dioptimasi sesuai standar, dari
segi kecepatan maupun keamanan.

PHP dan MySQL

PHP sering digunakan bersama dengan MySQL untuk membangun sebuah website
yang dinamis. MySQL adalah sebuah sistem manajemen database yang akan
mengakses dan memproses data.

Bagaimana proses kerja keduanya?

Sebelumnya PHP dan MySQL harus sudah terhubung satu sama lain. Nah, ketika ada
permintaan dari browser ke web server, PHP akan menghubungi MySQL server
untuk mencarikan data yang dibutuhkan di database. Setelah mendapatkan datanya,
MySQL server akan meneruskan informasi tersebut ke server untuk dilanjutkan ke
browser.

Jadi, dengan adanya PHP dan kemampuannya berkomunikasi dengan sebuah

database, Anda akan lebih mudah jika ingin mengembangkan website lebih besar
lagi.

1
 Pemrograman 2 Vivi

BAB IV

PEMBAHASAN JAVASCRIPT

4.1PENGERTIAN JAVASCRIPT

Javascript adalah bahasa pemrograman yang awalnya dirancang untuk

berjalan di atas browser. Namun, seiring perkembangan zaman, javascript tidak
hanya berjalan di atas browser saja. Javascript juga dapat digunakan pada sisi Server,
Game, IoT, Desktop, dsb. Javascript awalnya bernama Mocha, lalu berubah
menjadi LiveScri saat browser Netscape Navigator 2.0 rilis versi beta (September
1995). Namun, setelah itu dinamai ulang menjadi Javascript.
Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi
serupa. Microsoft membuat ‘Javascript’ versi mereka sendiri bernama JScript. Lalu di
tanam pada Internet Explorer 3.0.Hal ini mengakibatkan ‘ perang browser’, karena
JScript milik Microsoft berbeda dengan Javascript racikan Netscape.Akhirnya pada
tahun 1996, Netscape mengirimkan standarisasi ECMA-262 ke Ecma International.
Sehingga lahirlah standarisasi kode Javascript bernama ECMAScript atau ES. Saat ini
ECMAScript sudah mencapai versi 8 (ES8).
Versi ECMAScript Tahun Rilis

ES 1 Juni 1997

ES 2 Juni 1998

ES 3 Desember 1999

ES 4 Terbengkalai

ES 5 Desember 2009

ES 5.1 Juni 2011

ES 6 Juni 2015

1
 Pemrograman 2 Vivi

Versi ECMAScript Tahun Rilis

ES 7 Juni 2016

ES 8 Juni 2017

Mengenal Console JavaScript

Ada yang mengatakan, belajar javascript itu susah, karena saat melihat hasilnya di
web browser, pesan err -nya tidak tampil. Pendapat ini tidak benar. Karena kita
bisa melihatnya melalui conso .
Conso Javascript dapat kita buka melalui Inspect Element->Console.

Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya
akan langsung ditampilkan.

Maka hasilnya:

2
 Pemrograman 2 Vivi

Jika kamu menggunakan Nodejs, maka cara mengakses conso adalah dengan
mengetik perintah no pada Terminal.

Setelah mencoba conso Javascript, maka dapat kita simpulkan:

Consolebisa digunakan untuk mengujicoba fungsi atau kode Javascript;
Consoledapat kita gunakan untuk melihat pesan error saat debuggi program.
…apa lagi ya?

Membuat Program Javascript Pertama

Sudah paham cara membuka dan menggunakan console
javascript? Bagus…
Kalau begitu, mari kita buat program pertama dengan Javascript.
Silahkan buka teks editor, kemudian buat file baru bernama hello_world.ht dan
isi dengan kode berikut:

2
 Pemrograman 2 Vivi

Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini:

Silahkan disimpan dengan nama hello_world.html, kemudian buka file tersebut

dengan web browser.
Maka hasilnya:

Tunggu sebantar…
Tadi kita menulis perintah:

Mengapa tidak ditampilkan?

Karena perintah atau fungsi console.log akan menampilkan pesan ke
dalam conso javascript. Sedangkan perintah document.write berfungsi untuk
menulis ke dokumen HTML, maka dia akan ditampilkan kesana.
Sekarang coba saja buka console javascript.
Maka kita akan melihat pesan "Saya belajar Javascript":

2
 Pemrograman 2 Vivi

4.2 Bagaimana Cara Menulis Kode Javascript di HTML

Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML.
Cara tersebut merupakan cara penulisan embed (ditempel).
Masih ada beberapa cara lagi yang perlu kita ketahui:
1. Emb (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
2. Inli (kode Javascript ditulis pada atribut HTML)
3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

1. Penulisan Kode javascript dengan

Embed untuk menempelkan (embed)kode
Pada cara ini, kita menggunakan tag <scrip
Javascript pada HTML. Tag ini dapat ditulis di dalam tag <hea dan <body>.
Contoh:

Mana yang lebih bagus, ditulis di dalam <hea atau <body>?

Banyak yang merekomendasikan menuliskannya di dalam <body>, karena akan

2
 Pemrograman 2 Vivi
membuat web di-load lebih cepat.

2
 Pemrograman 2 Vivi

2. Penulisan Kode javascript Inline

Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini
biasanya digunakan untuk memanggil suatu fungsi pada eve tertentu.
Misal: saat link diklik.
Contoh:

atau bisa juga seperti ini:

Hasilnya:

Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan
untuk menampilkan dialog.
Lalu pada atribut href, kita juga memanggil fungsi alert dengan
didahului javascript: .
Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL.

3. Penulisan Kode javascript Eksternal

Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file
HTML.Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—
dengan cara ini—dapat lebih mudah mengelola kode project.
Mari kita lihat contohnya…
Kita buat dua file, yaitu: file HTML dan Javascript.

Isi dari kode-program.js:

file

Isi dari index.html:

file

2
 Pemrograman 2 Vivi

Hasilnya:

Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML.
Lalu, pada kode HTML…
Kita menyisipkannya dengan memberikan atribut src pada tag <script>.
<!-- Menyisipkan kode js eksternal

2
 Pemrograman 2 Vivi

BAB V
PEMBAHASAN UI/UX

5.1 PENGERTIAN UI/UX

Istilah UI dan UX akhir akhir ini sering kali muncul sebagai salah satu profesi
yang dibutuhkan di era teknologi saat ini. Ya, UI dan UX melekat pada profesi seorang
desainer atau writer. Kita sering menemukan lowongan pekerjaan UI/UX
Designer dan UX writer pada suatu perusahaan startup. UI merupakan singkatan dari
User Interface, sedangkan UX yaitu User Experience. Namun banyak orang yang
menyangka bahwa kedua istilah tersebut bermakna sama. Padahal, keduanya
merupakan bidang profesi yang berbeda meskipun saling berkesinambungan. Nah,
apa yang membedakan UI dan UX? Bagaimana dasar-dasar UI/UX dalam pekerjaan?
Mari simak ulasan lengkapnya berikut ini.
UI dan UX Designer merupakan pekerjaan yang sudah familiar di dunia IT.
Profesi tersebut pun bisa dimiliki oleh setiap orang tanpa menentukan latar belakang
jurusan dan pendidikan yang ditekuni. Hal yang perlu ditingkatkan adalah niat dan
kemauan untuk belajar menjadi seorang ahli UI/UX. Apa sih sebenarnya UI dan UX
itu?
UI atau User Interface merupakan ilmu yang mempelajari tentang tata letak
grafis dan tampilan suatu website atau aplikasi. Hal tersebut berhubungan dengan
desain antarmuka perangkat lunak yang diterapkan pada perangkat teknologi
seperti computer maupun mobile phone. UI menekankan pada tampilan atau
visualisasi sebagai hasil desain yang dibuat. Oleh karena itu, komponen UI sangat erat
kaitannya dengan kreativitas seperti warna, font, tipografi, gambar, layout, tema,
animasi, dan elemen visual lainnya.
UX atau User Experience merupakan ilmu yang berfokus pada desain suatu
produk berdasarkan apa yang dibutuhkan dan diinginkan pengguna. Profesi UX lebih
memainkan perannya pada konten dan elemen dari suatu informasi yang akan
berkaitan dengan tujuan bisnis dan kebutuhan pengguna. UX Design menjadi salah
satu komponen utama untuk membuat website, aplikasi, atau produk apapun yang
orang inginkan. Apabila UI berfungsi untuk memberikan tampilan yang
menghubungkan produk dan pengguna, UX berfungsi untuk meningkatkan kepuasan
2
 Pemrograman 2 Vivi

pengguna melalui fungsi dan kenyamanan daro produk yang dikembangkan. Adapun
komponen UX terdiri dari struktur desain, navigasi, dan visual desain.

5.2 Prinsip UI/UX

Hal yang utama untuk mempelajari UI/UX adalah mengenal prinsip dan proses
kreatif. Seperti yang dibahas sebelumnya bahwa UI adalah semua elemen yang
berkaitan dengan tampilan suatu produk. Maka dari itu, hal-hal mendasar yang perlu
dipelajari yaitu Warna
Mengenal dasar-dasar warna dan maknanya akan membantu kita untuk
mendesain suatu tampilan yang baik. Selain itu, psikologi warna dan hubungan
perpaduan warna juga penting untuk menciptakan kesan visual yang enak
dipandang. Keseimbangan, Kontras, dan Tipografi
Seorang UI/UX dituntut untuk merancang desain atau tampilan yang seimbang
dengan tetap mempertimbangkan kontras serta pilihan huruf yang enak dibaca.
Konsisten, Prinsip yang terakhir yaitu konsisten. Menjalankan profesi UI/UX
desainer harus terus senantiasa memperluas pengetahuan dan pengalaman untuk
bisa tetap konsisten mengemban tugas. Hal tersebut bisa dilakukan dengan berbagi
ilmu dengan komunitas UI/UX dan membaca berbagai referensi. Selain Prinsip UI,
ada pula 5 elemen atau prinsip UX yang berhubungan dengan ekspektasi pengguna
terhadap produk yang dikembangkan, diantaranya
 Strategy, Menentukan tujuan dari pembuatan produk dan apa yang diinginkan
pengguna
 Scope Menentukan kebutuhan pengguna seperti fitur dan hal apa yang harus
ada pada produk
 Structure Menentukan letak dan posisi fitur yang telah ditentukan dan
menguji apakah mereka akan berkesinambungan.
 Skeleton Langkah untuk merancang struktur atau komponen yang
memudahkan pengguna atau apa yang membuat orang akan nyaman dalam
berinteraksi dengan produk
 Surface Langkah untuk menyatukan semua ide secara visual dan menentukan
tampilan produk akhir

2
 Pemrograman 2 Vivi

5.3 Proses Kreatif UI/UX

Setelah memahami prinsip diatas, ada empat proses kreatif yang juga perlu
dipelajari dalam profesi UI/UX, diantaranya
 Discover
Pada proses ini, seorang UI/UX desainer akan melakukan riset dengan mencari
data dari beragam sumber untuk inspirasi dan ide.
 Define
Pada proses define, ide tersebut kemudian diterjemahkan dan didefinisikan
menjadi suatu rancangan yang akan dieksekusi.
 Develop
Proses berikutnya adalah pengembangan yang mana para ahli UI/UX membuat
alur, konsep, dan pengujian untuk menyempurnakan ide hingga hasilnya
maksimal.
 Delivery
Proses terakhir yaitu menyelsaikan dan memproduksi ide tersebut menjadi
suatu produk yang dapat dinikmati pengguna sesuai kebutuhan dan keinginan
mereka.

5.4 Alur Kerja UI/UX

Meskipun pengertian dan komponen UI dan UX berbeda, namun keduanya
saling mendukung dalam pengembangan suatu produk. Ahli UX menentukan
mengenai cara kerja user interface, sedangkan ahli UI akan membuat desain terkait
visualisasi produk tersebut. Baik UI dan UX perlu memahami apa yang dibutuhkan
user sehingga perlu adanya penelitian melalui testing plan A dan B untuk mengetahui
keinginan mereka. Tim UX akan berperan dalam application flow seperti bagaimana
fitur beroperasi dan bagaimana tampilan UI memenuhi kebutuhan user, sedangkan
tim UI akan berperan dalam menampikan semua elemen dan fitur tersebut. Maka
dari itu, kedua profesi ini ternyata saling bersinergi dalam mengembangkan produk
yang berkualitas. Lalu bagaimana keduanya bekerja? Berikut adalah tahapan kerja UI
dan UX

2
 Pemrograman 2 Vivi

1. Riset UX
Desainer UX harus paham ekspektasi pengguna untuk menentukan bagaimana
seharusnya produk dikembangkan atau dijalankan. Ahli UX dapat melakukan
riset baik melalui interview maupun questionnaire.
2. Membuat Information Architecture
Langkah selanjutnya yaitu membuat Information Architecture (IA) yang
merupakan susunan struktur bagian-bagian untuk mempermudah dalam
memahami konsep suatu produk. Perlu diingat bahwa untuk membuat IA
diperlukan hasil penelitian UX.
3. Membuat Wireframe
Berikutnya, membuat wireframe atau sketsa visual berupa alur informasi
untuk mengoperasikan suatu produk. Wireframe ini nantinya akan
mempermudah tim desainer untuk menentukan bagaimana produk
ditampilkan. Wireframe dapat dibuat dengan menggunakan aplikasi seperti
Adobe XD, Sketch, dan Figma.
4. Mengatur UX Flows
Setelah membuat wireframe, berikutnya yaitu mengatur alur bagaimana
produk akan digunakan oleh user untuk menentukan kenyamanan.
5. Membuat Prototype Desain UX
Langkah berikutnya yaitu membuat prototipe desain berdasarkan proses
wireframing dan UX flows yang telah dilakukan. Banyak aplikasi yang bisa
digunakan untuk membuat prototipe seperti MockPlus dan InVision.
6. Membuat Desain Sistem
Pada pembuatan desain system, diperlukan kolaborasi antara tim UI dan
developer. Pada tahap ini, komponen desain akan disimpan untuk proses
pembuatan yang lebih cepat. Komponen yang dimaksud diantaranya seperti
warna, ikon, font, dan sebagainya.
7. Mendesain User Interface
Pada tahap ini, desainer UI mulai berperan dalam membuat visual yang
menarik yang dapat memenuhi ekspektasi pengguna. Para ahli UI akan
bertugas untuk memperindah sketsa dengan paduan warna, tipografi, teks,

3
 Pemrograman 2 Vivi

dan gambar melalui aplikasi desain seperti Adobe Illustrator dan Adobe
Photoshop.
8. Proses Pengembangan Produk
Selanjutnya, para developer mulai mengembangkan yang telah di desain oleh
tim UI dan telah lolos uji coba.
9. Peluncuran Produk
Setelah produk telah dihasilkan, maka produk siap diluncurkan. Namun,
proses uji coba perlu dilakukan terlebih dahulu. Setelah itu, produk akan
direvisi sesuai dengan saran dari pengguna. Produk akan dikembangkan
kembali dengan desain yang nyaman dan sesuai kebutuhan pengguna.

3
 Pemrograman 2 Vivi

BAB VI
PEMBAHASAN DATABASE

6.1 PENGERTIAN DATABASE

Database adalah alat yang digunakan untuk mengumpulkan dan menata informasi.

Database dapat menyimpan informasi tentang orang-orang, produk, pesanan, atau banyak

lagi lainnya. Kebanyakan database dimulai sebagai daftar dalam program pengolahan kata

atau lembar bentang. Karena daftar berkembang lebih besar, kelebihan dan inkonsistensi

mulai muncul dalam data. Data menjadi sulit dipahami dalam bentuk daftar dan hanya ada

sedikit cara untuk mencari atau mengambil subset data untuk peninjauan. Saat masalah ini

mulai muncul, mentransfer data ke database yang dibuat oleh sistem manajemen database

(DBMS), seperti Access, adalah ide yang tepat.

Database yang terkomputerisasi adalah wadah berbagai objek. Satu database dapat

memuat lebih dari satu tabel. Misalnya, sistem pelacakan inventaris yang menggunakan

tiga tabel bukanlah tiga database, namun satu database yang memuat tiga tabel. Kecuali

telah didesain khusus untuk menggunakan data atau kode dari sumber lain, database

Access menyimpan tabelnya dalam satu file, beserta objek lain seperti formulir, laporan,

makro, dan modul. Database yang dibuat dalam format Access 2007 (yang juga digunakan

oleh Access 2016, Access 2013 dan Access 2010) memiliki ekstensi file .accdb, dan

database yang dibuat dalam format Access yang lebih lama memiliki ekstensi file .mdb.

Anda dapat menggunakan Access 2016, Access 2013, Access 2010, atau Access 2007

untuk membuat file dalam format yang lebih lama (misalnya, Access 2000 dan Access

2002-2003).

Dengan Access, Anda dapat:

 Menambahkan data baru ke database, seperti item baru dalam inventaris

3
 Pemrograman 2 Vivi

 Mengedit data yang sudah ada dalam database, seperti mengubah lokasi item saat
ini
 Menghapus informasi, mungkin jika item terjual atau dibuang
 Mengatur dan menampilkan data dalam berbagai cara
 Berbagi data dengan orang lain melalui laporan, pesan email, intranet atau Internet

6.2 Bagian dari database Access

Bagian berikut adalah deskripsi singkat dari bagian umum database Access.
 Tabel
 Formulir
 Laporan
 Kueri
 Makro
 Modul

Tabel

Tabel database memiliki tampilan yang mirip dengan lembar bentang, data juga
disimpan dalam baris dan kolom di dalamnya. Maka dari itu, akan sangat mudah untuk
mengimpor lembar bentang ke tabel database. Perbedaan utama antara menyimpan data di
lembar bentang dan di dalam database terletak pada cara penataan data.
Untuk fleksibilitas yang maksimal dari database, data perlu ditata dalam tabel
sehingga kelebihan data tidak akan terjadi. Misalnya, jika Anda menyimpan informasi
tentang karyawan, setiap karyawan hanya perlu dimasukkan satu kali dalam tabel yang
disiapkan untuk menampung data karyawan saja. Data tentang produk akan disimpan
dalam tabel tersendiri, dan data tentang kantor cabang akan disimpan dalam tabel lain.
Proses ini disebut normalisasi.
Setiap baris dalam tabel disebut sebagai catatan. Catatan adalah tempat potongan
informasi tersendiri disimpan. Setiap catatan terdiri dari satu atau beberapa bidang. Bidang
berhubungan dengan kolom dalam tabel. Misalnya, Anda mungkin memiliki tabel
bernama "Karyawan", ketika setiap catatan (baris) berisi informasi tentang karyawan yang
berbeda, dan setiap bidang (kolom) berisi jenis informasi yang berbeda, seperti nama

3
 Pemrograman 2 Vivi

depan, nama belakang, alamat, dan seterusnya. Bidang harus ditetapkan sebagai tipe data
tertentu, baik tipe data teks, tanggal atau waktu, angka, atau lainnya.
Cara lain untuk menjelaskan catatan dan bidang adalah memvisualisasikan katalog
kartu pustaka model lama. Setiap kartu yang ada dalam lemari berkaitan
dengan catatan dalam database. Setiap potongan informasi pada kartu tersendiri (penulis,
judul, dan lain-lain) terkait dengan bidang dalam database.

Formulir
Formulir memungkinkan Anda membuat antarmuka pengguna tempat data dapat
dimasukkan dan diedit. Formulir sering berisi tombol perintah dan kontrol lain yang
melakukan berbagai tugas. Anda dapat membuat database tanpa menggunakan formulir
cukup dengan mengedit data di lembar data tabel. Namun, kebanyakan pengguna database
memilih menggunakan formulir untuk menampilkan, memasukkan, dan mengedit data
dalam tabel.
Anda dapat memprogram tombol perintah untuk menentukan data mana yang
muncul pada formulir, membuka formulir atau laporan lain, atau melakukan berbagai
tugas lain. Misalnya, Anda memiliki formulir bernama "Formulir Pelanggan" yang
digunakan untuk bekerja dengan data pelanggan. Formulir pelanggan mungkin memiliki
tombol yang akan membuka formulir pesanan tempat Anda dapat memasukkan pesanan
baru dari pelanggan tersebut.
Formulir juga memungkinkan Anda mengontrol bagaimana pengguna lain
berinteraksi dengan data di dalam database. Misalnya, Anda dapat membuat formulir yang
hanya memperlihatkan bidang tertentu dan hanya mengizinkan operasi tertentu untuk
dijalankan. Hal ini membantu melindungi data dan memastikan bahwa data dimasukkan
dengan benar.

Laporan

Laporan adalah yang Anda gunakan untuk memformat, meringkas dan menyajikan
data. Laporan biasanya menjawab pertanyaan tertentu, seperti "berapa banyak uang yang
kami terima dari masing-masing pelanggan tahun ini?" atau "apa kota pelanggan kami

3
 Pemrograman 2 Vivi

terletak di?" Setiap laporan bisa diformat untuk menyajikan informasi dengan cara yang
paling mudah dibaca.
Laporan dapat dijalankan kapan pun, dan akan selalu menampilkan data terbaru dalam
database. Laporan umumnya diformat untuk dicetak, tetapi juga dapat ditampilkan di
layar, diekspor ke program lain, atau dikirimkan sebagai lampiran pada pesan email.
Untuk informasi selengkapnya tentang laporan, lihat artikel pengenalan laporan di Access.

Kueri

Kueri dapat melakukan berbagai fungsi dalam database. Fungsi yang paling
umum adalah mengambil data tertentu dari tabel. Data yang ingin Anda lihat biasanya
tersebar dalam beberapa tabel, dan kueri memungkinkan Anda untuk menampilkannya
dalam satu lembar data. Juga, karena Anda biasanya tidak ingin melihat semua catatan
sekaligus, kueri memungkinkan penambahan kriteria untuk "memfilter" data menjadi
catatan yang diinginkan saja.
Kueri tertentu "dapat diperbarui", yang berarti Anda dapat mengedit data dalam
tabel sumber melalui lembar data kueri. Jika bekerja pada kueri yang dapat diperbarui,
ingat bahwa perubahan Anda benar-benar dibuat di dalam tabel, bukan hanya dalam
lembar data kueri.
Kueri tersedia dalam dua varietas dasar: Pilih kueri dan kueri tindakan. Kueri
pemilihan hanya mengambil data dan membuatnya tersedia untuk digunakan. Anda bisa
menampilkan hasil kueri pada layar, mencetaknya, atau menyalinnya ke clipboard. Atau,
Anda dapat menggunakan output kueri sebagai sumber rekaman untuk formulir atau
laporan.
Kueri tindakan, sesuai namanya, menjalankan tugas dengan data. Kueri tindakan
dapat digunakan untuk membuat tabel baru, menambahkan data ke tabel yang sudah ada,
memperbarui data, atau menghapus data.

Makro

Makro dalam Access dapat dianggap sebagai bahasa pemrograman sederhana yang
dapat digunakan untuk menambahkan fungsionalitas ke database Anda. Misalnya, Anda
dapat melampirkan makro ke tombol perintah pada formulir sehingga makro akan berjalan
3
 Pemrograman 2 Vivi

setiap kali tombol diklik. Makro berisi tindakan yang melakukan tugas, seperti membuka
laporan, menjalankan kueri, atau menutup database. Sebagian besar operasi database yang
dilakukan secara manual dapat diotomatiskan menggunakan makro, sehingga dapat
menjadi penghemat waktu yang hebat.

Modul

Modul, seperti makro, adalah objek yang dapat Anda gunakan untuk menambahkan
fungsionalitas ke database. Sementara makro dibuat di Access dengan memilih dari daftar
tindakan makro, modul ditulis dalam bahasa pemrograman Visual Basic untuk Aplikasi
(VBA). Modul adalah kumpulan deklarasi, pernyataan, dan prosedur yang disimpan
bersama-sama sebagai satu unit. Modul dapat berupa modul kelas atau modul standar.
Modul kelas dilampirkan pada formulir atau laporan, dan biasanya berisi prosedur khusus
untuk formulir atau laporan tempatnya dilampirkan. Modul standar berisi prosedur umum
yang tidak terkait dengan objek lainnya. Modul standar tercantum di bawah Modul dalam
Panel Navigasi, sedangkan modul kelas tidak.

3
 Pemrograman 2 Vivi Oktavilianda

BAB VII
PENUTUP

7.1 Kesimpulan.

HTML adalah sebuah program yang diperuntukan untuk membuat desain web dan

diuploadnya ke server, sehingga bisa dilihat secara public. Dalam pembentukan website

menggunakan HTML tentunya tidak lepas dari yang namanya tag dan atribut untuk unsure

pembuatannya.

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML.

Dimana www merupakan suatu protokol standar dari internet, sedangkan HTML

merupakan script atau program standar yang dijalankan oleh www atau internet. Proyek

HTML ini dibuat dengan menggunakan media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian

tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini

dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap

baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa

yang akan kita buat.

7.2 Saran atau Rekomendasi

1. Perlunya pembelajaran teori khusus dan praktek yang rutin.

2. Dalam metode pembelajaran jangan terlalu cepat untuk mempelajarinya.

3. Pembelajaran ini harus dilakukan secara bertahap dan jelas.

Akhir kata saya ucapkan terimakasih dan mohon maaf sebelumnya apabila Dalam

pembuatan makalah ini masih banyak kekurangan dan jauh dari kesempurnaan. Semoga

makalah ini dapat bermanfaat bagi kita semua. Amin….

Wassalamua’llaikum Wr. Wb.

36