0% menganggap dokumen ini bermanfaat (0 suara)

181 tayangan190 halaman

Laporan Akhir PBW

Diunggah oleh

madubuana

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

181 tayangan190 halaman

Laporan Akhir PBW

Diunggah oleh

madubuana

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

LAPORAN AKHIR

PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Di Susun Oleh :

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
KELAS : 2C
DOSEN : Achmad Yasid S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 22 MARET 2024

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
LAPORAN AKHIR
PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Di Susun Oleh :

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
KELAS : 2C
DOSEN : Achmad Yasid S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 22 MARET 2024

Disetujui 21 JUNI 2024

Asisten

AGASTIA DEVI WARDANI

20.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
KATA PENGANTAR
Segala puji dan syukur bagi Allah SWT yang telah memberikan Rahmat dan
Karunia - Nya, sehingga dapat melaksanakan praktikum pemrograman berbasis
web dan menyelesaikannya dengan baik. Sehingga tersusunlah sebuah laporan
praktikum pemrograman berbasis web ini. Tak lupa Sholawat serta salam selalu
tercurahkan kepada Nabi Muhammad SAW, beserta keluarganya, sahabatnya, dan
orang-orang yang berjalan di atas Manhajnya hingga akhir zaman.
Dengan selesainya laporan praktikum pemrograman berbasis web ini, maka
tidak lupa mengucapkan banyak terima kasih kepada semua pihak yang terlibat
dalam penyusunan laporan praktikum pemrograman berbasis web. Khususnya
kepada :
1. Bapak Achmad Yasid S.Kom. M.Kom, selaku dosen pengampu mata
kuliahpemrograman berbasis web yang telah memberikan materi dengan baik
kepada kami.
2. Kak Agastia Devi Wardani, selaku asistensi praktikum yang telah
membimbing saya dari awal praktikum hingga akhir praktikum.
3. Seluruh teman – teman kelas yang berkenan saling membantu sehingga
dapat menyelesaikan praktikum dengan baik
4. Tak lupa juga kepada keluarga di rumah yang selalu memberikan dukungan
kepada saya
Demikian laporan praktikum ini dibuat. Disadari atau tidak, mungkin dalam
penulisan laporan praktikum ini masih sangat jauh dari kata sempurna. Penulis
mohon maaf apabila masih ada banyak kekurangan.
Akhir kata penulis mengucapkan terimakasih kepada semua pihak yang telah
membaca laporan ini, semoga bermanfaat

Bangkalan, 20 Juni 2024

Penyusun

Sunda Madu Buana

230441100003
1. Lembar
LAPORAN RESMI
MODUL I
HTML
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 23041100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 22 Maret 2024

Disetujui : 27 MARET 2024

Asisten

AGASTIA DEVI WARDANI

20.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Dalam dunia industri yang maju sangat pesat ini, tidak menutup kemungkinan
dari hasil karya sekumpulan manusia yang mempuyai suatu tujuan. Di masa yang
sudah canggih ini kita sering menggunakan Web (website atau situs) dapat diartikan
sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar
diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik
yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan
yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink), salah satunya html.
HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah
webpage, HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya
internet, pada pertama kali muncul internet masih dalam keadaan berbasis text
dimana tampilan sebuah halaman web hanya berisikan sebuah text yang monotone
tanpa sebuah format dokumen secara visual Pemograman HTML muncul seiring
perkembangan teknologi dan informasi

1.2 Tujuan
1. Mampu menjelaskan pengertian HTML.
2. Mampu mengimplementasikan struktur dasar, tag-tag HTML.
3. Mampu membuat aplikasi dengan perintah-perintah HTML.
BAB II
DASAR TEORI
2.1 Pengertian HTML
HTML adalah HyperText Markup Language merupakan sebuah bahasa
markah untuk membuat halaman web (Wikipedia). Dokumen HTML adalah file
text murni yang dapat dibuat dengan teks editor sembarang. Dokumen ini dikenal
sebagai web page. File-file HTML ini berisi instruksi-instruksi yang kemudian
diterjemahkan oleh browser yang ada dikomputer client (user) sehingga isi
informasinya dapat ditampilkan secara visual dikomputer pengguna (user).
HTML menggunakan serangkaian tag atau elemen untuk menandai berbagai
bagian dari halaman, seperti teks, gambar, link, dan tabel. Browser web kemudian
menginterpretasikan tag-tag ini untuk menampilkan halaman web dengan benar
kepada pengguna.

2.2 Web Browser

Web Browser adalah perangkat lunak yang digunakan untuk membuka file
HTML yang telah dibuat selain itu web broser juga digunakan untuk mengakses
informasi yang disimpan di internet. Ini adalah program yang memungkinkan
pengguna untuk melihat dan menavigasi halaman web, serta menampilkan konten
seperti teks, gambar, video, dan aplikasi web.

2.3 Text Editor

Sebuah text editor adalah perangkat lunak yang digunakan untuk membuat
dan mengedit berkas teks. Dalam konteks pembelajaran pemrograman website,
editor teks digunakan untuk menulis kode HTML, CSS, dan JavaScript. Editor
teks dapatbervariasi dari yang sederhana seperti Notepad (pada sistem Windows)
hingga yangcanggih seperti Visual Studio Code, Sublime Text, atau Atom. Editor
teks yang baik biasanya dilengkapi dengan fitur-fitur seperti penyorotan sintaksis,
penyelesaian kode, dan pengelolaan proyek yang membantu siswa dalam menulis
dan mengorganisir kode mereka dengan lebih efisien.
2.4 Struktur dasar HTML
Struktur dasar HTML terdiri dari tag-tag yang diperlukan untuk memulai dan
mengakhiri halaman web. Setiap halaman HTML dimulai dengan tag <html> dan
diakhiri dengan tag </html>. Di dalamnya, terdapat tag <head> untuk informasi
tentang halaman dan tag <body> untuk konten utama yang akan ditampilkan kepada
pengguna. Jadi setiap dokumen html harus mempunyai pola dasar sebagai berikut:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>
Setiap dokumen HTML harus diawali dengan menuliskan tag dan diakhir
</html>
dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah
dokumen HTML. Dalam satu dokumen hanya ada satu elemen HTML.
Section atau elemen head dimulai dengan tag diawal, dan tag diakhir.
Section ini berisi informasi tentang dokumen htmlnya. Minimal informasi yang
dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan
pada caption bar dari window browser, ditandai dengan menggunakan tag .
Sehingga bagian yang diapit oleh tag HEAD merupakan header dari halaman
HTML dan tidak ditampilkan pada browser. Sedangkan tag TITLE yang berfungsi
untuk mengeluarkan judul pada title bar window web browser.

Section atau elemen body ditandai dengan tag diawal dan tag diakhir.
Section body merupakan elemen terbesar didalam dokumen HTML. Pada bagian
ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam
format maupun gambar yang ingin disampaikan pada pengguna nantinya.
2.5 Tag-tag HTML dan Fungsinya
a. Warna latar belakang

<body bgcolor=#nnnnnn> . . . </body>

b. Menggunakan gambar

<body background=“nama_file_gambar”> . . . </body>

c. Heading
Untuk judul atau sub judul dalam dokumen HTML

<h1 [align=”left”|”center”|”right”]> . . . </h1>

<h2 [align=”left”|”center”|”right”]> . . . </h2>

<h6 [align=”left”|”center”|”right”]> . . . </h6>

d. Paragraph
Untuk mengatur perataannya (kiri, tengah, kanan):

<p [align=”left”|”center”|”right”]> . . . </p>

e. Break

Untuk menulis teks pada baris berikutnya: <br>

f. Font

Ukuran font

<font size=“n”> . . . </font>

Jenis font

<font size=“n” face=“jenis_font”> . . . </font>

Warna font

<font size=“n”
g. Untuk formatface=“jenis_font”
Teks color=“warna”> . . . </font>
Bold:

<b> . . .</b>
Emphasized:

<em> . . . </em>
Italic:

<i> . . . </i>
Superscript:

<sup> . . .</sup>
Subscripted:

<sub> . . . </sub>
Struck trough:
h. Gambar
<del> Memuat
Untuk . . . </del>
gambar ke dalam halaman Web

<img src=”URL”|”name” height=”n” width=”n”

align=”top”|”center”|”bottom”] />

i. Hypertext Link

Format:

<a href=”address” > . . . </a>

Link ke dokumen lain

<a href=”nama_dokumen” > . . . </a>

Link ke bagian tertentu dalamdokumen yang sama

<a href=”#target” > . . . </a>

<a href=”target” > . . . </a>

Link ke alamat URL atau WebSite

<a href=”alamat_URL” > . . . </a>

2.6 Tabel
Ketika membuat tabel dengan HTML ada beberapa tag atau elemen HTML
yang harus diketahui. Akan tetapi pada dasarnya sudah bisa membuat tabel dengan
hanya menggunakan 3 elemen HTML berikut :
a. Elemen <table> digunakan untuk mendefinisikan pembuatan tabel
b. Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
c. Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada
tabel
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga
menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut.
a. Elemen <th> digunakan untuk mendefinisikan header di dalam tabel
b. Elemen <thead> digunakan untuk membungkus konten bagian judul atau
kepala tabel
c. Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh
dari tabel
d. Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah
dari tabel
Conton sintak membuat tabel :

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Mengenal Tabel HTML</title>

</head>

<body>

<tr>

<td>Baris ke 1 - Kolom ke 1</td>

<td>Baris ke 1 - Kolom ke 2</td>

</tr>

<tr>

<td>Baris ke 2 - Kolom ke 1</td>

Pada kode di atas terdapat
<td>Baris atribut ke
ke 2 - Kolom border dalam tag table, atribut border
2</td>
tersebut berfungsi
</tr> untuk memberikan garis pada tabel. Sedangkan angka 1 di dalam
atribut border merupakan nilai ketebalan garis yang akan ditampilkan, semakin
</table>
besar nilai tersebut maka semakin tebal garis yang ditampilkan.
</body>

</html>
Saat membuat tabel, terkadang kita dihadapkan akan kebutuhan untuk
menggabungkan beberapa sel menjadi satu. Untuk menggabungkan beberapa sel
menjadi satu pada suatu tabel, HTML menyediakan beberapa atribut yang bisa
kamu gunakan seperti berikut :
a. Atribut rowspan digunakan untuk menggabungkan baris pada tabel
b. Atribut colspan digunakan untuk menggabungkan kolom pada tabel
Atribut tersebut bisa diterapkan pada tag td maupun th. Perhatikan contoh kode
program berikut :

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Mengenal Tabel HTML</title>

</head>

<body>

<tr>

<th colspan="3">Nilai</th>

</tr>

<tr>

<th>Kimia</th>

<th>Fisika</th>

<th>Biologi</th>

</tr>

<tr>

<td>Robby</td>

</tr>

</table>

</body>

</html>
2.7 Form
Elemen HTML <form> digunakan untuk membuat formulir HTML untuk
input pengguna:

<form>

form elements

</form>
Elemen <form> adalah wadah untuk berbagai jenis elemen masukan,
seperti: bidang teks, kotak centang, tombol radio, tombol kirim, dll.
Elemen HTML <input> adalah elemen formulir yang paling banyak
digunakan. Suatu <input> elemen dapat ditampilkan dalam berbagai cara,
bergantung pada atributnya type . Berikut beberapa contohnya:
Type Deskripsi

<input type="text"> Displays a single-line text input field

Displays a radio button (for selecting one of
<input type="radio">
many choices)
Displays a checkbox (for selecting zero or
<input type="checkbox">
more of many choices)
Displays a submit button (for submitting the
<input type="submit">
form)
<input type="button"> Displays a clickable button
Perhatikan contoh kode program berikut :
<form>

Formulir dengan kolom input untuk teks:

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

Formulir dengan tombol radio:

<input type="radio" id="html" name="fav_language" value="HTML">

<input type="radio" id="css" name="fav_language" value="CSS">

<input type="radio" id="javascript" name="fav_language"

value="JavaScript">

<label for="javascript">JavaScript</label>

Formulir dengan kotak centang:

<input type="checkbox" id="vehicle1" name="vehicle1"

value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2"

value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3"

value="Boat">

<label for="vehicle3"> I have a boat</label>

Membuat tombol untuk mengirim formulir yang telah di isi

<input type="submit" value="Submit">

</form>
BAB III TUGAS PENDAHULUAN
BAB IV
IMPLEMENTASI
4.1 Source-Code:
1. Biodata Diri
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Biodata Diri</title>
<style>
body {
background-color: aquamarine;
}
</style>
</head>
<body>
<h1 align="center">BIODATA DIRI</h1>
<hr width="600px">
<table align="center" cellpadding="10px" width="600px">
<tr>
<td>Nama</td>
<td>: Sunda Madu Buana</td>
<td rowspan="8"><img src="madu.jpg" alt=""
height="200px" width="170px"></td>
</tr>
<tr>
<td>NIM</td>
<td>: 230441100003</td>
</tr>
<tr>
<td>Alamat</td>
<td>: Bangkalan, Socah</td>
</tr>
<tr>
<td>TTL</td>
<td>: Jayapura / 17 April 2005</td>
</tr>
<tr>
<td>Agama</td>
<td>: Islam</td>
</tr>
<tr>
<td>Email</td>
<td>: [email protected]</td>
</tr>
<tr>
<td>Hobby</td>
<td>: Baca novel</td>
</tr>
<tr>
<td>No handphone</td>
<td>: 082199048001</td>
</tr>
</table>
<center><a href="halaman2.html">Click here !</a></center>
</body>
</html>

Penjelasan 1:
Pada source code diatas menggunakan judul "Biodata Diri" yang berada di
tengah (align="center"), diikuti oleh garis horizontal (hr) yang lebarnya 600 piksel.
Informasi pribadi yang dalam sebuah tabel yang terletak di tengah halaman
(align="center") dengan lebar 600 piksel. Setiap entri dalam tabel disusun dengan
baik menggunakan tag <td> (table data). Ada tujuh baris dalam tabel yang
mencakup nama, NIM, alamat, tempat dan tanggal lahir, agama, hobi, dan nomor
telepon. Foto Radhina juga disertakan di sebelah kanan tabel dengan dimensi
200x150 piksel. Selain itu, di bagian bawah halaman, terdapat tautan yang
mengarah ke halaman lain dengan teks "Click to DataMahasiswa !" yang terletak
di tengah halaman (align="center").

2. Tabel Mahasiswa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Absen Praktikum</title>
<style>
body {
background-color: #A0E9FF;
}
</style>
</head>
<body>
<h1 align="center">Daftar Absensi Praktikum</h1>
<table border="1" cellspacing="3" cellpadding="8"
align="center">
<tr align="center" bgcolor="#F8BDEB">
<th>No</th>
<th>Nama</th>
<th>NIM</th>
<th>Asprak</th>
</tr>
<tr bgcolor="#FFC6AC">
<td>1</td>
<td>KHRISNA ADI WINATA</td>
<td>190441100022</td>
<td rowspan="12">Agastia Devi Wardani</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>2</td>
<td>RADHINA ZAKHRATUL JANNAH</td>
<td>230441100002</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>3</td>
<td>SUNDA MADU BUANA</td>
<td>230441100003</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>4</td>
<td>SAFIRA RIHADATUL AISY</td>
<td>230441100005</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>5</td>
<td>MUHAMMAD YUSRI</td>
<td>230441100008</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>6</td>
<td>MUHAMMAD ILHAM FERDIANSYAH</td>
<td>230441100009</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>7</td>
<td>WAHYU ALIF AJIR NURDIANTO</td>
<td>230441100014</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>8</td>
<td>AMANDA AULIA PUTRI</td>
<td>230441100017</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>9</td>
<td>ACHMAD RENDI SETIAWAN</td>
<td>230441100018</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>10</td>
<td>FRINANDA AL FITRAH RAMADHANI</td>
<td>230441100019</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>11</td>
<td>ARIFIN ABDILLAH</td>
<td>230441100020</td>
</tr>
<tr bgcolor="#FFC6AC">
<td>12</td>
<td>LANNY APRILIA</td>
<td>230441100022</td>
</tr>
<tr bgcolor="#FF6666">
<td>13</td>
<td>EVRILLA STEVIANO TUMANGGOR</td>
<td>230441100024</td>
<td rowspan="13">Devi Dwi Novitasari</td>
</tr>
<tr bgcolor="#FF6666">
<td>14</td>
<td>ARNO GALIH CANDRA KARTIKA</td>
<td>230441100033</td>
</tr>
<tr bgcolor="#FF6666">
<td>15</td>
<td>TRI CITRA AMBARWATI</td>
<td>230441100036</td>
</tr>
<tr bgcolor="#FF6666">
<td>16</td>
<td>NUR MUHAMMAD</td>
<td>230441100037</td>
</tr>
<tr bgcolor="#FF6666">
<td>17</td>
<td>SESILIA FEBI DIYANTIKA</td>
<td>230441100040</td>
</tr>
<tr bgcolor="#FF6666">
<td>18</td>
<td>ABD. BASED</td>
<td>230441100055</td>
</tr>
<tr bgcolor="#FF6666">
<td>19</td>
<td>ARIQ IKBAR HAKIM</td>
<td>230441100058</td>
</tr>
<tr bgcolor="#FF6666">
<td>20</td>
<td>AKBAR MAULANA HUSADA</td>
<td>230441100060</td>
</tr>
<tr bgcolor="#FF6666">
<td>21</td>
<td>MOHAMMAD GUFRON</td>
<td>230441100065</td>
</tr>
<tr bgcolor="#FF6666">
<td>22</td>
<td>MUHAMMAD BINTANG EYZRIL DHIYA'ULHAQ</td>
<td>230441100084</td>
</tr>
<tr bgcolor="#FF6666">
<td>23</td>
<td>TRINANDA INDRAYANA</td>
<td>230441100108</td>
</tr>
<tr bgcolor="#FF6666">
<td>24</td>
<td>CYNDIFANITA B'THARI MARSHA</td>
<td>230441100109</td>
</tr>
<tr bgcolor="#FF6666">
<td>25</td>
<td>RAYHAN NUR MAULIDAN</td>
<td>230441100112</td>
</tr>
<tr bgcolor="#73A9AD">
<td>26</td>
<td>NAFI' ALI YAHYA</td>
<td>230441100115</td>
<td rowspan="13">Cindy Permata Sari</td>
</tr>
<tr bgcolor="#73A9AD">
<td>27</td>
<td>LAVELIA MUFARIDATUL FAZALINA</td>
<td>230441100122</td>
</tr>
<tr bgcolor="#73A9AD">
<td>28</td>
<td>AHMAD TIYANDI AL AZHAR</td>
<td>230441100131</td>
</tr>
<tr bgcolor="#73A9AD">
<td>29</td>
<td>ALIYUL RIDHO</td>
<td>230441100135</td>
</tr>
<tr bgcolor="#73A9AD">
<td>30</td>
<td>ADITYA</td>
<td>230441100138</td>
</tr>
<tr bgcolor="#73A9AD">
<td>31</td>
<td>AGATHA YASMIN RAHMAN</td>
<td>230441100156</td>
</tr>
<tr bgcolor="#73A9AD">
<td>32</td>
<td>MUHAMMAD ROBBI FIRMANSYAH</td>
<td>230441100163</td>
</tr>
<tr bgcolor="#73A9AD">
<td>33</td>
<td>M. RIYYAN KUSUMA ZUNAEDI</td>
<td>230441100164</td>
</tr>
<tr bgcolor="#73A9AD">
<td>34</td>
<td>ZAHRATUL ADZKA NAFISA HAFIZH</td>
<td>230441100165</td>
</tr>
<tr bgcolor="#73A9AD">
<td>35</td>
<td>TAUFIK IKROM JAMIL</td>
<td>230441100179</td>
</tr>
<tr bgcolor="#73A9AD">
<td>36</td>
<td>IBNU NASHRULLOH. M</td>
<td>230441100186</td>
</tr>
<tr bgcolor="#73A9AD">
<td>37</td>
<td>AHMAD MUSHOFA</td>
<td>230441100191</td>
</tr>
<tr bgcolor="#73A9AD">
<td>38</td>
<td>AHMAD RIKHAN ARBAI</td>
<td>230441100192</td>
</tr>
</table>
<br>
<center><a href="halaman3.html">next page</a></center>
<br>
</body>
</html>

Penjelasan 2 :

judul utama halaman yang ditampilkan dalam tag <h1> dengan atribut
align="center". Kemudian, terdapat sebuah tabel <table> yang berisi daftar
absensi praktikum. Setiap baris tabel <tr> mewakili entri untuk setiap
mahasiswa. Di dalam setiap baris, terdapat beberapa kolom <td> yang berisi
informasi seperti nomor absen, nama, NIM, dan nama asisten praktikum.
Terdapat juga penggunaan atribut bgcolor untuk memberikan warna latar
belakang pada setiap baris sesuai dengan kategori yang berbeda. Selain itu,
terdapat juga tautan menuju halaman berikutnya dengan menggunakan tag <a>
yang mengarahkan pengguna ke halaman halaman3.html.

3. Form Input

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Formulir Biodata</title>
</head>
<body>
<h1 align="center">Membuat Form Data Diri</h1>
<hr width="700px">
<form action="" method="post">
<table align="center">
<tr>
<td>Nama : </td>
<td><input type="text"></td>
</tr>
<tr>
<td>NIM : </td>
<td><input type="number"></td>
</tr>
<tr>
<td>Email : </td>
<td><input type="email"></td>
</tr>
<tr>
<td>Tanggal Lahir : </td>
<td><input type="date"></td>
</tr>
<tr>
<td>Jenis Kelamin : </td>
<td><input type="radio" name="jk"> Laki - laki
<input type="radio" name="jk"> Perempuan
</td>
</tr>
<tr>
<td>Hobby : </td>
<td><input type="checkbox"> Dance
<input type="checkbox"> Futsal
<input type="checkbox"> Membaca
<input type="checkbox"> Melukis
<input type="checkbox"> Berenang
</td>
</tr>
<tr>
<td>Alamat : </td>
<td><textarea name="" id="" cols="30"
rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Simpan">
<input type="button" value="Kembali">
</td>
</tr>
</table>
</form>
<br>
<center><a href="halaman1.html">Back to home</a></center>
</body>
</html>

Penjelasan 3 :
Source code HTML di atas adalah sebuah formulir biodata yang dirancang
untuk mengumpulkan informasi pribadi pengguna. Formulir ini mencakup
bidang-bidang seperti nama, NIM, email, tanggal lahir, jenis kelamin, hobi, dan
alamat. Pada bagian atas halaman, terdapat judul "Membuat Form Data Diri"
yang diberi penempatan tengah dengan menggunakan atribut align="center".
Diikuti oleh sebuah garis horizontal yang dibuat dengan tag <hr> untuk
memisahkan judul dengan formulir.Formulir ini terdiri dari beberapa input dan
elemen lainnya, Input Nama: Pengguna diminta untuk memasukkan nama
mereka menggunakan input tipe teks. Input NIM: Terdapat input tipe angka
untuk memasukkan NIM pengguna. Input Email: Untuk memasukkan alamat
email, digunakan input tipe email. Input Tanggal Lahir: Digunakan input tipe
tanggal untuk memudahkan pengguna memilih tanggal lahir mereka. Pilihan
Jenis Kelamin: Ada dua opsi radio button yang memungkinkan pengguna
memilih jenis kelamin mereka. Pilihan Hobi: Terdapat beberapa opsi checkbox
yang memungkinkan pengguna memilih hobi mereka. Input Alamat: Untuk
memasukkan alamat, digunakan elemen textarea yang memungkinkan
pengguna memasukkan teks dalam jumlah yang lebih besar. Tombol Simpan
dan Kembali: Tombol "Simpan" akan mengirimkan data formulir, sedangkan
tombol "Kembali" berfungsi untuk mengembalikan pengguna ke halaman
sebelumnya. Tautan Kembali ke Halaman Utama: Di bagian bawah halaman,
terdapat tautan yang mengarahkan pengguna kembali ke halaman utama dengan
menggunakan tag <a>.
4.2 Output
1. Biodata Diri

2. Tabel Mahasiswa
3. Form Input
BAB V
PENUTUP
5.1 Analisa
Ketiga halaman HTML tersebut memiliki tujuan yang berbeda-beda.
Halaman pertama, yang menampilkan biodata seseorang, menggunakan tag-tag
HTML seperti <table>, <tr>, <td>, dan <img> untuk menampilkan informasi
seperti nama, alamat, tanggal lahir, program studi, dan hobi. Selain itu, halaman
tersebut juga menyertakan sebuah link yang mengarah ke halaman lain dengan teks
Halaman kedua menampilkan data mahasiswa dalam bentuk tabel. Dengan
menggunakan tag-tag HTML seperti <table>, <tr>, <td>, dan <th>, setiap baris
tabel mewakili satu mahasiswa dengan kolomnya adalah nomor, nama, NIM, dan
nama asprak. Terdapat beberapa mahasiswa yang memiliki asprak yang sama,
ditandai dengan penggunaan atribut rowspan pada kolom asprak.
Halaman ketiga menampilkan sebuah form untuk menambahkan data baru.
Dengan menggunakan tag-tag HTML seperti <form>, <table>, <tr>, <td>, <input>,
<select>, dan <textarea>, form ini memungkinkan pengguna untuk memasukkan
informasi seperti nama, NIM, tanggal lahir, jenis kelamin, hobi, pendidikan, dan
alamat. Setelah pengguna mengisi informasi, mereka dapat menyimpannya dengan
menekan tombol "Simpan" yang ada pada form.

5.2 Kesimpulan
1. HTML mudah untuk dipelajari oleh seorang Web Developer pemula.
2. HTML adalah sebuah bahasa markup yang biasa digunakan untuk
menyusun dan membuat file website.
3. Dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan
bahasa skrip lainnya seperti JavaScript dan PHP.
4. Mempermudah dalam membuat website atau membuat aplikasi.
5. HTML juga untuk mendefinisikan struktur dan tampilan halaman web serta
mengintegrasikan elemen-elemen multimedia seperti gambar, video, dan
hyperlink.
LAPORAN RESMI
MODUL II
CSS
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 03 APRIL2024

Disetujui : 20 APRIL 2024

Asisten

AGASTIA DEVI WARDANI

22.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Pemrograman berbasis web adalah suatu teknologi yang digunakan untuk
membuat halaman web yang interaktif dan dinamis. Pemrograman berbasis web
menggunakan bahasa pemrograman seperti HTML, CSS. HTML digunakan untuk
membuat konten web, CSS digunakan untuk mengatur tata letak, warna, dan gaya
halaman web. Pemrograman berbasis web memiliki keunggulan yang lebih efisien
dalam pengembangan, pengujian, dan penggunaan.
Cascading Style Sheets (CSS) adalah bahasa stylesheet yang digunakan untuk
mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup, seperti
HTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS
digunakan untuk memformat halaman web yang ditulis dengan HTML. Fungsi
CSS pada pemrograman berbasis web adalah untuk mengatur tata letak, warna,
dan gaya halaman web.

1.2 Tujuan
 Mampu menjelaskan mengenai pengenalan CSS, selector, komentar, dan
mekanisme membuat perintah – perintah CSS PHP
 Mampu mengetahui jenis – jenis CSS
 Mampu menggunakan CSS untuk membuat halaman web terlihat lebih
menarik
BAB II
DASAR TEORI
2.1 CSS (Cascading Style Sheet)
CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman
untuk mengontrol tampilan dan gaya halaman web. Dengan CSS dapat digunakan
mengatur warna, ukuran, jenis huruf, jarak antar elemen, tata letak, dan atribut
tampilan lainnya dari elemen HTML.

2.2 Jenis Penempatan CSS

1. Eksternal CSS
Pada metode eksternal, kode CSS dibuat menjadi sebuah file dengan format .css.
URL file ini nantinya akan di-link dengan menggunakan elemen HTML link
yang ditempatkan di bagian head (baris ke-5 pada kode di bawah). Metode inilah
yang kita gunakan pada prosedur penambahan CSS di atas.

Contoh :

2. Internal CSS
Pada metode internal, kode CSS langsung didefinisikan pada dokumen
HTML. Konfigurasi diletakkan didalam elemen HTML style dan
menempatkannya pada bagian head (baris 5-10 pada kode di bawah).
Contoh :
3. Inline CSS
Pada metode inline, konfigurasi CSS langsung ditempatkan pada
elemen yang bersangkutan melalui atribut style (baris ke-8 pada kode di
bawah).
Contoh :

2.3 CSS Selector

CSS selektor adalah bagian dari deklarasi CSS yang mendefinisikan tentang
elemen mana yang akan diatur. Di dalam style didefinisikan bagaimana setiap
selector akan bekerja (font, color dan lain-lain.). Kemudian di dalam bagian
body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang
telah didefinisikan.
Jenis – jenis selector:
a. Selector berdasarkan Nama Elemen
Digunakan untuk mendefinisikan style yang berhubungan dengan tag
HTML,melakukan redefinisi tag normal HTML
Syntax:

b. Selector berdasarkan Class

Digunakan untuk mendefinisikan style yang dapat dipakai tanpa
melakukan redefinisi tag HTML.
Syntax:

c. Selector berdasarkan ID
Digunakan untuk mendefinisikan style yang berhubungan dengan suatu
object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer.

Syntax:

2.4 Elemen Elemen CSS

1. Font
Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini
mempunyai beberapa properti. Satu properti dapat mempunyai beberapa nilai.
2. Text
Element text akan membuat tampilan teks menjadi lebih menarik
3. Color
Elemen color yang digunakan untuk mengatur warna teks dan background
halaman web

4. Link
Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari
satu bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs
ke situs lainnya. CSS menyediakan elemen link yang dapat digunakan untuk
mengatur perilaku link.

2.5 CSS Image

CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada
html. Elemenini mempunyai beberapa attribut. Satu properti dapat mempunyai
beberapa nilai.
Tabel 1.4.1. Property dan value CSS yang mendukung format Gambar
BAB III TUGAS PENDAHULUAN
BAB IV
IMPLEMENTASI
4.1 Source Code
1. buatlah sebuah halaman web yang menampilkan menu makanan dan minuman,
buat dengan se-kreatif mungkin.

a. Tag html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Baratie Coffe</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Baratie Coffe</h1>

</div>

<img src="./img/Croffles.jpeg" alt="">

<h5>Croffles</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/churros.jpeg" alt="">

<h5>churros</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/espresso.jpg" alt="">

<h5>Espresso</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

</div>
<div class="food-items">

<img src="./img/mocha.jpeg" alt="">

<h5>Mocha Cola</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/moji.jpeg" alt="">

<h5>Mojito Strawberry</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/moza.jpeg" alt="">

<div class="details-sub">
<h5>Mozzarella Stick</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/potato.jpeg" alt="">

<h5>Potato wedges</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/sakura.jpeg" alt="">

<h5>Sakura Martini Mocktail</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/sandwich.jpeg" alt="">

<h5>Sandwich</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/smoothies.jpeg" alt="">

<h5>Smoothies</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

</div>
<div class="food-items">

<img src="./img/fruit.jpeg" alt="">

<h5>Fruit Fusion</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

<img src="./img/cassoulet.jpeg" alt="">

<h5>cassoulet</h5>

</div>

<p>Lorem ipsum dolor sit amet consectetur

adipisicing elit. Ut tenetur saepe placeat molestias voluptatibus,
harum impedit porro numquam blanditiis, autem ducimus nam veniam
quia, culpa aut ipsum voluptates at in!</p>

</div>

</body>
</html>

b. Style css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

text-decoration: none;

list-style: none;

font-family: sans-serif;

body {

background: #E0D8B0;

font-family: sans-serif;

.menu {

padding: 10px 30px 10px;

display: grid;

grid-template-columns: repeat(auto-fit,minmax(350px,1fr));

grid-gap: 20px 40px;

.heading {

background: #C8AE7D;

color: #ffff;

margin-bottom: 30px;

padding: 30px 0;

grid-column: 1/-1;

text-align: center;

}
.heading>h1 {

font-weight: 400;

font-size: 32px;

letter-spacing: 10px;

margin-bottom: 10px;

text-transform: uppercase;

.heading>h3 {

font-weight: 600;

font-size: 22px;

letter-spacing: 5px;

text-transform: uppercase;

.food-items {

display: grid;

position: relative;

grid-template-rows: auto 1fr;

border-radius: 15px;

box-shadow: 0 0 15px rgba(0,0,0,0.6);

transition: .2s ease-in-out;

.food-items img {

position: relative;

width: 100%;

height: 280px;

border-radius: 15px 15px 0 0;

cursor: pointer;

h1 {

grid-column: 1/-1;
text-align: center;

.details {

padding: 20px 10px;

display: grid;

grid-template-rows: auto 1fr 50px;

grid-row-gap: 15px;

background: #C8AE7D;

.details-sub {

display: grid;

grid-template-columns: auto auto;

.details-sub>h5 {

font-weight: 600;

font-size: 18px;

.price {

text-align: right;

.details>p {

color: #fff;

font-size: 15px;

line-height: 28px;

font-weight: 400;

align-self: stretch;

.details>button {

background: #765827;

border: none;
color: #fff;

font-size: 16px;

font-weight: 600;

border-radius: 5px;

width: 180px;

cursor: pointer;

.details>button:hover {

background: #65451F;

Penjelasan :

Program ini adalah sebuah website yang menampilkan menu makanan dan
minuman yang tersedia di restoran. Website ini menggunakan HTML dan CSS
untuk membuat struktur dan tampilan. Pada bagian atas, ada judul "Baratie Coffe"
dan subjudul "—Menu—". Di bawahnya, ada beberapa item makanan dan minuman
yang ditampilkan melalui tag <div> dengan class "food-items". Setiap item
makanan/minuman terdiri dari gambar, informasi detail, dan tombol "Add To Cart"
yang digunakan untuk menambahkan item tersebut ke keranjang belanja. Program
di atas menggunakan CSS untuk membuat halaman web terlihat lebih menarik.
4.2 Hasil
1. halaman web yang menampilkan menu makanan dan minuman
BAB V
PENUTUP
5.1 Analisa
Dari hasil praktikum, praktikan dapat mengetahui bahwa CSS digunakan untuk
mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup, seperti
HTML. Praktikan dapat menggunakan CSS untuk mengatur tata letak, warna, dan
gaya halaman web, seperti div, heading, navigasi dll. praktikan dapat membahas
tentang pengenalan CSS, penggunaan CSS, sintak CSS, dan menampilkan hasil
desain halaman web dengan CSS. mengembangkan website atau aplikasi web
menggunakan HTML dan CSS.
CSS mengurangi kerja yang dibutuhkan untuk mengatur tampilan halaman
web, karena ia mungkin untuk mengontrol tampilan elemen HTML secara global.
CSS digunakan untuk memformat halaman web yang ditulis dengan HTML. CSS
adalah bahasa yang digunakan untuk menentukan bagaimana elemen HTML harus
ditampilkan di layar, kertas, atau media lain.

5.2 Kesimpulan
1. CSS digunakan untuk mengatur tampilan dan format halaman web. Tanpa
CSS, halaman web akan terlihat sederhana dan tidak terstruktur.
2. Ada tiga jenis penempatan CSS, yaitu inline CSS, eksternal CSS, dan
Internal CSS.
3. CSS memiliki fitur – fitur seperti media queries yang memungkinkan untuk
tampilan halaman web menyesuaikan dengan berbagai perangkat dan
ukuran layar.
LAPORAN RESMI
MODUL III
FRAMEWORK CSS (BOOTSTRAP & TAILWIND)
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 03 APRIL 2024

Disetujui : 20 APRIL 2024

Asisten

AGASTIA DEVI WARDANI

22.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Framework CSS seperti Bootstrap dan TailwindCSS telah menjadi fondasi
utama dalam pengembangan web modern, menyediakan kumpulan alat dan gaya
bawaan yang mempercepat proses desain dan pengembangan. Bootstrap, yang
merupakan salah satu framework CSS yang paling populer, menawarkan
kumpulan komponen UI siap pakai, grid responsif, dan gaya prasetel yang dapat
digunakan untuk membangun situs web dengan cepat dan mudah. Dengan
penggunaan kelas CSS yang baku, Bootstrap memungkinkan pengembang untuk
menciptakan tampilan yang konsisten dan menarik dengan sedikit usaha.
Di sisi lain, TailwindCSS mengambil pendekatan yang berbeda dengan
menyediakan kumpulan utilitas CSS yang ekstensif yang memungkinkan
pengembang untuk membangun tampilan yang sangat kustomisasi dan unik.
Daripada menggunakan kelas bawaan seperti Bootstrap, TailwindCSS
memungkinkan pengguna untuk membuat gaya secara langsung di HTML
menggunakan kelas utilitas yang intuitif. Ini memberikan tingkat fleksibilitas
yang tinggi dalam desain dan memungkinkan pengembang untuk mencapai
tampilan yang tepat yang mereka inginkan.

1.2 Tujuan
 Mahasiswa dapat menggunakan bootstrap untuk meningkatkan pengaturan
layout web
 Mampu menggunakan Tailwindcss untuk membangun pembuatan laman
web
 Mampu mengetahui apa itu framework bootstrap dan tailwindcss
BAB II
DASAR TEORI
2.1 Bootstrap
Bootstrap adalah framework HTML, CSS, dan JavaScript yang membuat
desain situs web responsif menjadi mudah dan cepat. Selain digunakan untuk
mengembangkan situs web lebih cepat, Bootstrap merupakan kerangka kerja
sumber terbuka gratis. Skrip dan sintaks yang disediakan oleh Bootstrap dapat
diterapkan ke beberapa komponen desain web. Framework ini terdiri dari kumpulan
file CSS dan JavaScript dalam bentuk class-class cukup lengkap yang bisa
digunakan.

1. Menggunakan Bootstrap
Menggunakan boostrap dengan CDN merupakan salah satu cara yang paling
gampang dilakukan untuk belajar Bootstrap. Kita cukup copy link CDN Bootstrap,
lalu di taruh pada kode HTML. Dengan syaratnya yaitu harus terhubung dengan
internet, karena Bootstrap akan diambil dari server CDN. CDN adalah singkatan
dari Content Delivery Network, semacam server yang tersebar di seluruh dunia
untuk mengantarkan konten secara optimal dan cepat.
a. Buatlah folder baru dengan nama belajar-bootstrap, setelah itu buka dengan
VS Code
b. Setelah itu, buatlah file HTML baru dengan nama hello-bootstrap.html
c. Berikut merupakan contoh kode penggunaan Bootstrap sederhana
menggunakan layout 1 kolom yang bisa dicoba :
Penjelasan:
 Baris ke-11 menambahkan tautan ke file CSS Bootstrap yang digunakan untuk
mengatur gaya dan tata letak halaman.
 Baris ke-45 tautan ke file JavaScript Bootstrap yang diperlukan untuk fungsi
interaktif, seperti dropdown, modals, dan lainnya.
 Baris ke-15 menggunakan kelas "container" untuk mengelompokkan elemen
header dan memberikan padding di sekitarnya. Serta kelas "bg-primary" untuk
memberikan warna latar belakang biru pada elemen header & kelas "text-
white" untuk memberikan warna teks putih pada teks di dalam elemen header.
 Baris ke-16 menggunakan kelas "row" untuk membuat baris di dalam elemen
header, yang digunakan untuk menyusun elemen-elemen ke dalam kolom-
kolom. Dillanjut pada baris ke-17 dengan kelas "col-12" untuk membuat satu
kolom pada layout grid Bootstrap di dalam elemen header.
 Menggunakan kelas "py-4" untuk memberikan padding atas dan bawah sebesar
4 unit (dalam hal ini, unit adalah "rem") & kelas "text-center" untuk membuat
teks di dalam elemen menjadi berada di tengah secara horizontal.
 Baris ke-18 untuk membuat teks judul (heading) dengan ukuran yang besar
sesuai gaya Bootstrap & pemberian kelas "lead" untuk memberikan gaya
khusus pada paragraf, menambahkan ruang dan ukuran huruf yang nyaman.
 Baris ke-24 menggunakan kelas "container" untuk mengelompokkan elemen-
elemen utama dan memberikan padding di sekitarnya & kelas "border" untuk
menambahkan garis tepi pada elemen.
2. Kelas Grid
Bootstrap memiliki beberapa kelas grid:

 none : grid untuk phone portrait

 xs : grid untuk layout di layar ponsel

 sm : grid untuk layout di layar tablet

 md : grid untuk layout di layar laptop/notebook

 lg : grid untuk layout di layar laptop/desktop

 xl : grid untuk layout di layar desktop besar

Artinya ketika ingin mengatur grid untuk tampilan dilayar ponsel maka
gunakan kelas xs, untuk tablet gunakan kelas sm, dan seterusnya.

Ketika menggunakan sistem grid bootstrap :

 Baris-baris harus berada didalam sebuah kelas container atau container-

fluid agar obyek-obyek dalam laman teratur rapi.
 Gunakan kelas row untuk membuat kelompok kolom

 Tempatkan konten laman dalam kolom

 Setiap kolom memiliki jarak dengan kolom lain

Pada contoh penerapan grid diatas, terdapat 2 baris dengan penggunaan class
row serta pemberian 2 kolom pada baris 1 dan 1 kolom pada baris 2 menggunakan
class col dengan pengaturan untuk layar tablet/laptop. Dimana col memiliki ukuran
max 12 dan min 1. Aturan grid diatas juga memiliki jarak antar kolom dengan
ukuran 2 pada pemberian g-2 setelah penulisan class row.

2.2 Tailwind CSS

Tailwind adalah framework CSS yang bersifat utility-first. Artinya,
framework ini menyediakan serangkaian utility classes untuk merancang elemen UI
langsung di markup, tanpa harus meninggalkan HTML dan kembali ke stylesheet
untuk menentukan style. Sebagai contoh, jika ingin menerapkan display: flex
pada elemen, kamu tidak perlu membuat class CSS baru dalam stylesheet-mu.
Cukup tambahkan class flex dari Tailwind ke elemen tersebut dalam HTML dan
secara otomatis elemen akan menerapkannya.
Berbeda dengan framework CSS lainnya yang sering kali membatasi
kreativitas dengan komponen pre-styled, Tailwind CSS memungkinkan
'membangun' dari pada 'menyesuaikan', memberikan kontrol penuh atas setiap
elemen desain. Hasilnya, dapat lebih leluasa dalam mewujudkan ide kreatif dan
menghasilkan user interface yang tidak hanya indah, tetapi juga fungsional.

1. Cara menggunakan Tailwind CSS

Setelah mempersiapkan semua yang diperlukan, saatnya untuk menggunakan
Tailwind CSS. Berikut langkah-langkah untuk memulai:

• Install Tailwind CSS

Pertama, kamu perlu menginstal Tailwind CSS ke dalam proyek. Instalasi
bisa dilakukan menggunakan NPM (Node Package Manager) atau Yarn.
caranya, buka terminal atau command line, navigasikan ke direktori proyek,
kemudian jalankan perintah berikut:

Jika menggunakan Yarn:

• Buat file konfigurasi Tailwind

Setelah instalasi, langkah selanjutnya adalah membuat file konfigurasi
Tailwind.

File ini berguna untuk menyesuaikan setting Tailwind sesuai kebutuhan

proyek. Untuk membuat file konfigurasi, jalankan perintah berikut:

Perintah di atas akan menghasilkan file tailwind.config.js yang bisa kamu

modifikasi.
• Siapkan file CSS
Kamu perlu membuat file CSS yang berisi direktif khusus untuk Tailwind. Buat
file baru dengan nama apa pun sesuai kebutuhan (misalnya, styles.css) dan
tambahkan baris berikut:

Arahan ini memberitahu Tailwind untuk menyertakan style dasar, komponen,

dan utility-nya.
• Kompilasi file CSS
Setelah menyiapkan file CSS, kamu harus mengompilasinya menjadi file CSS
akhir yang akan digunakan di website. Jalankan perintah berikut di terminal:
Perintah ini akan mengompilasi file styles.css dan menghasilkan file output
yang siap digunakan (output.css).

• Sertakan CSS ke dalam proyek web

Langkah terakhir adalah menyertakan file CSS yang telah dikompilasi ke

dalam proyek web. Tambahkan tag < link > ke file HTML utama yang mengarah
ke file CSS-mu:

Pastikan untuk mengganti /path/to/your/ dengan directory path sesuai tempat

file output.css berada.

• Mulai gunakan Tailwind

Sekarang, kamu sudah bisa mulai menggunakan utility class

Tailwind dalam markup HTML untuk membuat desain UI.

Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra-
desain komponen, di TailwindCSS ini kamu tidak akan menemukan pra-
desain komponen seperti button, card, alert, carousel atau yang lainnya. Karena
TailwindCSS bukan merupakan sebuah UI kit, melainkan sebuah utility-first
framework untuk membangun antarmuka kustom dengan cepat.
Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang
merepresentasikan CSS declaration. Sehingga, ketika kamu ingin membuat sebuah
komponen, maka kamu perlu menggunakan beberapa class-class kecil tersebut
hingga tercipta komponen yang kamu maksud. Misal, kamu ingin membuat
sebuah komponen button.

Pada Bootstrap framework atau framework lain yang memiliki pra-desain

komponen, kurang lebih kamu melakukannya seperti ini :

<button class="btn">Button</button>atau<button
class="button">Button</button>

Sedangkan, pada Tailwind CSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-

4 rounded">
Button
</button>

Class-class di atas mewakili property dan value sendiri.

• bg-blue-500 merepresentasikan property background-color:

#4299e1;
• text-white merepresentasikan property color: #fff;
• font-bold merepresentasikan property font-weight: 700;
• py-2 maksudnya padding-y atau padding-
vertical merepresentasikan property padding-top: 0.5rem; dan
padding- bottom: 0.5rem;

• px-4 maksudnya padding-x atau padding-

horizontal merepresentasikan property padding-left: 1rem; dan
padding- right: 1rem;

 rounded merepresentasikan border-radius: .25rem

Kelihatannya ribet, ya?

Tapi, dengan seperti ini, UI yang kamu buat dengan orang lain akan
berbeda meski menggunakan framework yang sama. Berbeda halnya bila
menggunakan UI kit, UI yang dibuat akan cenderung sama, karena di dalam UI kit
sudah tersedia pra-desain komponen, meski style- nya dapat di-override, tetapi
hasilnya mungkin tidak berbeda jauh. Tailwind CSS tidak dapat dibandingkan
dengan framework UI kit — seperti Bootstrap, Bulma atau Spectre — karena
pada dasarnya, mereka memiliki konsep yang berbeda. Bila pada framework UI
kit kamu perlu membuat beberapa custom class untuk mengkostumisasi pra-
desain komponen yang digunakan, sedangkan di TailwindCSS kamu akan dapat
mereduksi penggunaan custom class. Karena, untuk membuat komponen kamu
perlu melakukannya dari awal, dengan cara menyusun utility class.
BAB III TUGAS PENDAHULUAN
BAB IV
IMPLEMENTASI
4.1 Source Code
1. buatlah halaman web dengan tema pendidikan menggunakan framework
bootstrap

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-

scale=1.0" />

<title>hiroshima international school</title>

integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous" />

integrity="sha384-
AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous" />

<link rel="stylesheet" href="pendidikan.css" />

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-

top">

<div class="container">
<a class="navbar-brand" href="#"><span class="text-
warning">Hiroshima</span>Class</a> <button

aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation"

class="navbar-toggler" data-bs-
target="#navbarSupportedContent" data-bs-toggle="collapse"

type="button"><span class="navbar-toggler-
icon"></span></button>

<div class="collapse navbar-collapse"

id="navbarSupportedContent">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

<a class="nav-link" href="#">Home</a>

</li>

<a class="nav-link" href="#about">About</a>

</li>

<a class="nav-link" href="#class">Class</a>

</li>

<a class="nav-link"
href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

<div class="carousel slide" data-bs-ride="carousel"

id="carouselExampleIndicators">

<button aria-label="Slide 1" class="active" data-bs-

slide-to="0" data-bs-target="#carouselExampleIndicators"
type="button"></button> <button aria-label="Slide 2"
data-bs-slide-to="1"

data-bs-target="#carouselExampleIndicators"
type="button"></button> <button aria-label="Slide 3"

data-bs-slide-to="2" data-bs-
target="#carouselExampleIndicators" type="button"></button>

</div>

<div class="carousel-item active">

<img alt="..." class="d-block w-100"

src="img/img1.jpeg">

<h5>Hiroshima International School <br>広島国際学

院</h5>

<p>Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Maxime, nulla, tempore. Deserunt

excepturi quas vero.</p>

<p><a class="btn btn-warning mt-3"

href="#">Learn More</a></p>

</div>

<img alt="..." class="d-block w-100"

src="img/img2.jpeg">

<h5>reach for your dreams <br>夢に向かう</h5>

<p>Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Maxime, nulla, tempore. Deserunt

excepturi quas vero.</p>

<p><a class="btn btn-warning mt-3"

href="#">Learn More</a></p>

</div>

<h5>Life, learning, growing <br>人生、学び、成長す

る</h5>

<p>Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Maxime, nulla, tempore. Deserunt

excepturi quas vero.</p>

<p><a class="btn btn-warning mt-3"

href="#">Learn More</a></p>

</div>

</div><button class="carousel-control-prev" data-bs-

slide="prev" data-bs-target="#carouselExampleIndicators"

type="button"><span aria-hidden="true" class="carousel-

control-prev-icon"></span> <span

class="visually-hidden">Previous</span></button>
<button class="carousel-control-next"

data-bs-slide="next" data-bs-
target="#carouselExampleIndicators" type="button"><span aria-
hidden="true"

class="carousel-control-next-icon"></span> <span
class="visually-hidden">Next</span></button>

</div>

<section class="about section-padding" id="about">

<div class="col-lg-4 col-md-12 col-12">

<div class="about-img"><img alt="" class="img-

fluid" src="img/about.jpeg"></div>

</div>

<div class="col-lg-8 col-md-12 col-12 ps-lg-5 mt-md-

5">
<div class="about-text">

<h2>knowing about<br>Hiroshima International

School</h2>

<p>Lorem ipsum, dolor sit amet consectetur

adipisicing elit. Totam, labore reiciendis. Assumenda

eos quod animi! Soluta nesciunt

inventore dolores excepturi provident, culpa beatae tempora,

explicabo corporis quibusdam corrupti.

Autem, quaerat. Assumenda quo aliquam vel, nostrum

explicabo ipsum dolor, ipsa perferendis

porro doloribus obcaecati placeat natus iste odio

est non earum?</p><a class="btn btn-

warning" href="#">Learn More</a>

</div>

</section>

<section class="class section-padding" id="class">

<div class="section-header text-center pb-5">

<h2>Our Classes</h2>

</div>

<div class="col-12 col-md-12 col-lg-4">

<div class="card text-light text-center bg-white

pb-2">
<div class="card-body text-dark">

<div class="img-area mb-4"><img alt=""

class="img-fluid" src="img/bahasa.png"></div>

<h3 class="card-title">Language
Class</h3>

A language class typically refers to

a structured educational program or course designed

to teach a specific language, such

as English, Spanish, French, Mandarin, etc. These

classes are conducted by language

instructors or teachers who guide students through

various aspects of the language,

including vocabulary, grammar, pronunciation, reading,

writing, and speaking skills.

</p>

</div>

<div class="col-12 col-md-12 col-lg-4">

<div class="card text-light text-center bg-white

pb-2">

<div class="card-body text-dark">

<div class="img-area mb-4"><img alt=""

class="img-fluid" src="img/math.png"></div>

<h3 class="card-title">Math Class</h3>

A math class, short for mathematics

class, is an educational setting where students

learn mathematical concepts,

theories, and problem-solving techniques. These classes are

typically led by math teachers or

instructors who guide students through various topics

within the realm of mathematics.

</p>

</div>

<div class="col-12 col-md-12 col-lg-4">

<div class="card text-light text-center bg-white

pb-2">

<div class="card-body text-dark">

<div class="img-area mb-4"><img alt=""

class="img-fluid" src="img/sience.png"></div>

<h3 class="card-title">Science
Class</h3>

A science class typically refers to

an educational setting where students learn about

various branches of science,

including biology, chemistry, physics, earth science, and

environmental science, among others.

In a science class, students study the fundamental

principles, theories, and concepts

of science through hands-on experiments,

demonstrations, lectures,
discussions, and other interactive activities.

</p>

</div>

</section>

<div class="row single-form g-0">

<div class="col-sm-12 col-lg-6">

<h2><span>Contact for</span> <br>join

with us</h2>

</div>

<div class="col-sm-12 col-lg-6">

<i class="fa fa-caret-left"></i>

<form>

<input type="text" class="form-

control" id="exampleInputEmail1"

aria-
describedby="emailHelp">

</div>

<label for="exampleInputEmail1"
class="form-label">Email address</label>

<input type="email" class="form-

control" id="exampleInputEmail1"

aria-
describedby="emailHelp">

</div>

<label
for="exampleInputPassword1" class="form-label">Message</label>

</div>

<button type="submit" class="btn

btn-primary">Submit</button>

</form>

</div>

<br>

<footer class="bg-dark p-2 text-center">

<p class="text-white">All Right Reserved By

@zal.khav</p>

</div>

</footer>

integrity="sha384-
JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"

crossorigin="anonymous"></script>

</body>

</html>
Penjelasan :
Halaman web ini merupakan tata letak dasar untuk situs web sekolah
internasional Hiroshima. Dengan navigasi yang mudah diakses, pengunjung dapat
menjelajahi bagian-bagian situs, termasuk tentang sekolah, kelas yang ditawarkan,
dan cara untuk menghubungi mereka. Desainnya responsif dan menarik perhatian
dengan menggunakan carousel untuk gambar-gambar yang berputar dan
menyajikan informasi singkat tentang sekolah serta kelas-kelas yang tersedia.
Dengan menggunakan Bootstrap dan Font Awesome, halaman ini memiliki
tampilan yang modern dan profesional, sesuai dengan citra sekolah internasional.
Di bagian atas halaman, terdapat navigasi yang mencakup tautan ke beranda,
informasi tentang sekolah, kelas yang ditawarkan, dan cara menghubungi mereka.
Ini memberikan akses cepat ke informasi yang paling relevan bagi pengguna. Di
tengah halaman, terdapat carousel yang menampilkan gambar-gambar yang
berputar secara otomatis. Setiap gambar didampingi dengan judul yang menarik
perhatian dan deskripsi singkat yang menggambarkan nilai-nilai pendidikan yang
ditekankan oleh sekolah.
Bagian tentang memberikan wawasan tentang identitas dan nilai-nilai inti dari
Hiroshima International School. Dengan gambar dan teks yang sesuai, pengunjung
dapat memahami esensi dari apa yang sekolah tersebut tawarkan. Bagian kelas
memberikan informasi rinci tentang jenis kelas yang tersedia, termasuk Bahasa,
Matematika, dan Sains. Deskripsi untuk setiap kelas memberikan gambaran tentang
kurikulum dan pendekatan pengajaran yang digunakan oleh sekolah.
Di bagian kontak, pengunjung diberi opsi untuk menghubungi sekolah melalui
formulir kontak. Ini memudahkan orang-orang untuk mengajukan pertanyaan atau
menyatakan minat mereka dalam bergabung dengan sekolah. Footer situs web
berisi informasi hak cipta dan nama pengembang situs, memberikan kejelasan
tentang kepemilikan dan pembuat situs.

2. Buat halaman web tema lingkungan menggunakan tailwindscs.

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Environment</title>

<style>

.card {

background: #49c97e;

background-size: cover;

background-position: center;

color: white;

border: none;

border-radius: 10px;

overflow: hidden;

position: relative;

transition: transform 0.3s ease;

box-shadow: 0 0 20px rgba(39, 38, 38, 0.5);

.card:hover {

transform: scale(1.05);

.card-header {

background-color: rgba(32, 32, 32, 0.5);

padding: 20px;
font-weight: bold;

.card-body {

padding: 100px;

.btn-primary {

background-color: black;

border-color: black;

.btn-primary:hover {

background-color: #4CAF50;

border-color: #4CAF50;

.card-text {

font-weight: bold;

@keyframes fadeInUp {

0% {

opacity: 0;

transform: translateY(20px);

100% {

opacity: 1;

transform: translateY(0);

}
}

.animated {

animation: fadeInUp 0.5s ease-out;

.feature-icon {

width: 60px;

height: 60px;

border-radius: 50%;

background-color: #48BB78;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 20px;

.feature-icon img {

width: 60px;

height: 60px;

border-radius: 50%;

@keyframes moveText {

0% {

transform: translateX(-100%);

100% {

transform: translateX(100%);
}

.moving-text {

animation: moveText 10s linear infinite;

/* Style untuk teks footer */

.moving-text {

color: #fff;

font-size: 18px;

font-weight: bold;

.text-xl {

font-size: 30px;

font-weight: bold;

/* Style untuk link pada navigasi */

nav a {

color: #fff;

text-decoration: none;

transition: color 0.3s ease;

font-size: 20px;

font-weight: bold;

nav a:hover {

color: #0c0e0d;

/* Ganti warna hover menjadi hijau */

}
</style>

</head>

<header class="bg-green-500 text-white py-4">

<div class="container mx-auto flex justify-between items-

center px-4">

<h1 class="text-xl font-semibold">Environment</h1>

<nav>

<ul class="flex space-x-4">

<li><a href="#"
class="hover:underline">about</a></li>

<li><a href="#"
class="hover:underline">contact</a></li>

</ul>

</nav>

</div>

</header>

<div class="card text-center my-8 mx-auto" style="max-width:

800px;">

What is 3R?

</div>

Lorem, ipsum dolor sit amet consectetur adipisicing

elit. Quas eligendi quasi consectetur doloremque,

ipsum, debitis maiores quisquam eaque assumenda

quod quam dolorem beatae, quo totam ab odit? Ullam,
doloribus numquam.

</p>

<a href="#" class="btn btn-primary">Learn more</a>

</div>

<main class="container mx-auto py-8">

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-

cols-3 gap-8">

<div class="p-6 bg-white rounded-lg shadow-md

animated">

<div class="feature-icon mb-4 mx-auto">

<img src="img/reuse.jpeg" alt="Reuse Icon">

</div>

<h2 class="text-xl font-semibold mb-4">Reuse</h2>

Reuse refers to the practice of using items,

materials, or products again for the same or different

purpose without significant alteration or

processing. In the context of environmental

sustainability, reuse is an important concept

because it helps reduce waste generation and conserves

resources.

</p>

</div>

<div class="p-6 bg-white rounded-lg shadow-md

animated">

<div class="feature-icon mb-4 mx-auto">

<img src="img/reduce.jpeg" alt="Reduce Icon">

</div>

<h2 class="text-xl font-semibold mb-4">Reduce</h2>

<p class="text-gray-700">
In the context of environmental sustainability,
"reduce" refers to the practice of minimizing waste

and consumption to lessen the environmental

impact of human activities. It is one of the key

principles in the "reduce, reuse, recycle"

hierarchy, which emphasizes prioritizing actions to

prevent waste generation in the first place.

</p>

</div>

<div class="p-6 bg-white rounded-lg shadow-md

animated">

<div class="feature-icon mb-4 mx-auto">

<img src="img/recycle.png" alt="Recycle Icon">

</div>

<h2 class="text-xl font-semibold mb-4">Recycle</h2>

Recycling is the process of converting waste

materials into new materials and objects. It is an

essential component of waste management and

environmental conservation efforts. Instead of disposing

of used materials as waste, recycling allows

these materials to be transformed into new products,

reducing the consumption of raw materials,

energy usage, and pollution associated with traditional

manufacturing processes.

</p>

</div>

</section>

</main>

<footer class="bg-green-500 text-white py-4">

<div class="container mx-auto text-center">

<p class="moving-text">Hak Cipta © zal.khav</p>

</div>

</footer>

</body>

</html>

Penjelasan :
Header situs memiliki judul "Environment" dengan navigasi yang sederhana
namun efektif, memudahkan pengguna untuk menavigasi halaman.
Bagian pertama adalah sebuah kartu yang menjelaskan tentang konsep 3R:
Reduce, Reuse, dan Recycle. Ini memberikan pengantar singkat tentang praktik-
praktik tersebut dan mengundang pengunjung untuk mempelajari lebih lanjut.
Di bagian utama, terdapat tiga bagian yang membahas masing-masing
konsep 3R secara lebih detail. Setiap bagian memiliki gambar ikon yang
representatif, judul yang menonjol, dan teks yang menjelaskan konsep tersebut
secara jelas.
Footer situs memiliki teks bergerak yang menarik perhatian pengguna dan
memberikan informasi tentang hak cipta pembuat situs. Seluruh halaman
menggunakan warna hijau yang konsisten, mencerminkan tema lingkungan dan
kesadaran akan keberlanjutan. Penggunaan efek animasi dan desain yang bersih dan
modern membuat halaman ini menarik dan mudah dinavigasi.
4.2 Hasil
1. halaman web yang menampilkan menu makanan dan minuman
2. Tailwind tema lingkungan
BAB V
PENUTUP
5.1 Analisa
Kode tersebut merupakan halaman web untuk Hiroshima International School
yang menggunakan Bootstrap untuk membuat tata letak responsif dan menarik.
Halaman tersebut memiliki navigasi yang jelas, carousel untuk menampilkan
informasi utama, bagian yang merinci tentang sekolah, kelas yang ditawarkan,
formulir kontak, dan footer dengan informasi hak cipta. Desainnya bersih dan
informatif, memudahkan pengguna untuk menjelajahi informasi tentang sekolah
dan menghubungi mereka.
Sementara halaman web kedua membahas isu lingkungan dengan tata letak
yang sederhana namun efektif, memberikan informasi tentang pentingnya
menanam pohon, reboisasi, dan pemisahan sampah. Dengan fokus pada edukasi
lingkungan, halaman ini bertujuan untuk meningkatkan kesadaran dan perilaku pro
lingkungan bagi pengunjungnya.

5.2 Kesimpulan
1. Bootstrap adalah salah satu kerangka kerja CSS yang paling banyak
digunakan di seluruh dunia.
2. Bootstrap memiliki tata letak responsif bawaan yang memudahkan
pengembang untuk membuat situs web yang terlihat baik di berbagai
perangkat dan ukuran layar.
3. Tailwind CSS adalah kerangka kerja CSS yang berbeda dengan pendekatan
yang lebih "utility-first".
4. Tailwind memungkinkan pengembang untuk lebih fleksibel dalam
mendesain antarmuka sesuai kebutuhan proyek.
LAPORAN RESMI
MODUL IV
JAVASCRIPT
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 26 APRIL 2024

Disetujui : 17 MEI MEI

2024Asisten

AGASTIA DEVI WARDANI

22.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
Javascript merupakan bahasa pemrograman yang dikembangkan unutk
membuat sebuah website agar lebih interaktif dan dinamis. Dengan Javascript kita
dapatmeningkatkan fungsionalitas website kita, bahkan dapat kita gunakan unutk
membuataplikasi, tools maupun game. Javascript sendiri merupakan bahasa
pemrogramaninterpreter sehingga tidak memerlukan proses compiling untuk
menjalankan. Bahasa javascript memiliki fitur seperti object-oriented, client-side,
pemrograman level tinggidan loosy typed.Untuk menjalankan javascript terdapat
2 cara yaitu, menjalankan langsung melaluiconsole browser dan menjalankan
lewat file yang di muat pada sebuah halaman web.
Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin
luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk
memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke
server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda.
Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien),
sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang
dijalankan oleh klien.

1.2 Tujuan
 Mahasiswa dapat membuat halaman web yang lebih interaktif, dinamis, dan
responsif
 Mahasiswa mampu memahami dasar pemrograman Javascript
 Mahasiswa mampu memahami apa itu Event dan DOM Manipulation
BAB II
DASAR TEORI
2.1 JavaScript
JavaScript, bahasa pemrograman yang sangat populer dalam pengembangan
web, pertamakali dikembangkan oleh Brendan Eich di Netscape Communications
pada tahun 1995. Awalnya dikenal sebagai Mocha dan kemudian LiveScript,
sebelum akhirnya dinamai JavaScript. Pada tahun 1997, JavaScript diajukan
sebagai standar ECMAScript kepada European Computer Manufacturers
Association (ECMA). Sejak itu, JavaScript terus berkembang dengan penambahan
fitur baru dan peningkatan kinerja melalui rilis ECMAScriptyang berkala, seperti
ES6 (ECMAScript 2015).
Dengan kemampuannya untuk menambahkan interaktivitas ke halaman web,
JavaScript menjadi bahasa pemrograman yang sangat populer. Selain digunakan
dalam pengembangan web, JavaScript juga digunakan dalam pengembangan
aplikasi mobile, desktop, permainan, dan bahkan di bidang pengembangan server
(Node.js). JavaScript saat ini menjadi salah satu elemen kunci dalam ekosistem
pengembangan web modern, bersama dengan HTML dan CSS, memungkinkan
pembuatan aplikasi web yang kompleks dan interaktif.

A. Variable dan Tipe Data

1. Variabel
Variabel digunakan untuk menyimpan data dalam JavaScript.
Mendeklarasikan variabel dilakukan dengan menggunakan kata kunci var, let,
atau const.
Penjelasan :
• Var dan let: digunakan untuk mendefinisikan bahwa suatu variabel
tersebut nilainya dapat berubah.
• Const: digunakan untuk mendefinisikan bahwa suatu variabel tersebut
nilainya tidak dapat berubah (konstan).
Syntax umum :
 var/let/const [nama_variabel] = nilai;
Contoh :
 var namaLengkap = “otong surotong”;
 let nama_panggilan = ‘surot;
 const PI = 3.14;

2. Tipe Data
JavaScript memiliki beberapa tipe data dasar seperti string, number,
boolean, null,undefined, array, dan object. Setiap tipe data memiliki peran dan
karakteristiknya sendiri.
Penjelasan :
 string : digunakan untuk merepresentasikan teks atau urutan
karakter. Stringdituliskan di dalam tanda kutip, baik tunggal ('') maupun
ganda ("").
 number : digunakan untuk merepresentasikan nilai numerik. Ini bisa
berupabilangan bulat (integer) atau bilangan pecahan (floating point).
 boolean : digunakan untuk merepresentasikan 2 nilai yaitu (true)
atau (false).
 null : digunakan untuk menunjukkan bahwa sebuah variabel tidak
memiliki nilai atau tidak memiliki nilai yang valid. Secara harfiah, null
berarti "tidak ada nilai".
 undefined : digunakan untuk menunjukkan bahwa sebuah variabel telah
dideklarasikan tetapi tidak memiliki nilai yang diberikan.
 array : digunakan untuk menyimpan kumpulan nilai dalam satu
variabel.Elemen-elemen dalam array diindeks, dimulai dari indeks 0.
 object : digunakan untuk merepresentasikan sebuah objek, yang terdiri
dari kumpulan pasangan kunci-nilai (key-value pairs). Objek dapat
memiliki propertidan metode.


Setiap tipe data dalam JavaScript memiliki karakteristik dan penggunaan

masing-masing, dan memahami mereka secara mendalam sangat penting dalam
pengembangan aplikasi JavaScript yang efektif.

3. Operator dan Ekspresi

A. Operator
Operator adalah simbol atau kata kunci yang digunakan untuk melakukan
operasi pada operand (nilai atau variabel). Di JavaScript, ada beberapa jenis
operator yang berbeda.
Diantaranya :
 Operator aritmatika : digunakan untuk melakukan operasi
matematika padaoperand. Contoh ( +, -, *, /, % ).
 Operator perbandingan : digunakan untuk membandingkan dua nilai
atau variabel dan menghasilkan nilai boolean. Contoh ( <, <=, >, >=, ==, !=,
===, !== ).
 Operator logika : digunakan untuk menggabungkan atau
membalikkankondisi logika dan menghasilkan nilai boolean. Contoh ( &&,
||, ! ).
Operator penugasan : digunakan untuk memberikan nilai kepada
variabel.Contoh ( =, +=, -=, *=, dll ).
B. Ekspresi
Ekspresi adalah kombinasi variabel, nilai, operator, dan/atau fungsi yang
dievaluasi menjadi nilai tunggal. Ekspresi dapat berupa ekspresi aritmatika,
ekspresi logika, atau ekspresi yang lebih kompleks.

Contoh ekspresi:

 Ekspresi aritmatika :(2 + 3 )

 Ekspresi perbandingan : ( 2 >= -2 )
 Ekspresi logika : ( true && false )
 Ekspresi penugasan : ( x *= 10 )
 Ekspresi fungsi : ( Math.max(5, 10) )

Ekspresi dievaluasi menjadi nilai tunggal sesuai dengan aturan dan operasi
yang dinyatakan di dalamnya. Ekspresi ini sering digunakan dalam kondisi,
perulangan, dan pernyataan lainnya dalam JavaScript untuk mengontrol alur
eksekusi program.
Memahami operator dan ekspresi adalah kunci dalam pemrograman
JavaScript, karena mereka memungkinkan kita untuk melakukan berbagai macam
operasi dan mengendalikan alureksekusi program secara efektif.

4. Struktur Kontrol
Dalam pemrograman JavaScript, struktur kontrol digunakan untuk mengontrol
alur eksekusi program berdasarkan kondisi tertentu atau untuk mengulangi blok
kode tertentu. Dengan memahami struktur kontrol, Anda dapat membuat program
yang lebih dinamis dan responsif. Berikut adalah beberapa konsep struktur kontrol
yang penting:

A. Seleksi Kondisi (if, else if, else)

Seleksi kondisi digunakan untuk menjalankan blok kode tertentu berdasarkan
kondisi yang diberikan. Pernyataan if digunakan untuk mengevaluasi ekspresi
boolean, jika ekspresitersebut benar (true), maka blok kode di dalam if akan
dieksekusi. Jika ekspresi tersebut salah (false), maka blok kode di dalam else
akan dieksekusi. else if dapat digunakan untuk mengevaluasi beberapa kondisi.
Syntax umum :

• if (kondisi_1) {

//pernyataan-1;
} else if (kondisi_2) {

//pernyataan 2;
if (kondisi_3){

// pernyataan-3;
} else {
// pernyataan-4;
}

B. Perulangan (for, while, do-while)

Pengulangan digunakan untuk mengeksekusi blok kode berulang kali.
JavaScript menyediakan beberapa jenis pengulangan, yaitu for, while, dan do-
while. Loop for digunakan ketika Anda mengetahui berapa kali iterasi yang
dibutuhkan, while digunakan ketika Anda hanya ingin menjalankan loop selama
kondisi tertentu terpenuhi, dan do-while digunakan ketika Anda ingin
menjalankan loop setidaknya sekali sebelum mengevaluasi kondisi.

Syntax umum:

• For → for (inisialisasi; kondisi; iterasi) {

// pernyataan yang ingin diulang;
}
• while → while (kondisi) {
// Blok kode yang akan diulang
// Perhatikan bahwa kondisi akan dievaluasi sebelum setiap iterasi
}
• do-while → do {
// Blok kode yang akan diulang
// Perhatikan bahwa blok kode akan dijalankan setidaknya sekali
sebelum kondisi dievaluasi
} while (kondisi);

5. Fungsi
Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu.
Dengan menggunakan fungsi, Anda dapat mengorganisir kode Anda menjadi
bagian-bagian yang lebihkecil dan dapat digunakan kembali. Dalam JavaScript,
fungsi sangat penting dan dapat digunakan untuk berbagai tujuan, mulai dari
mengeksekusi tugas sederhana hingga mengelola logika yang kompleks dalam
aplikasi Anda.
Kegunaan fungsi :
 Fungsi digunakan untuk mengelompokkan serangkaian pernyataan
menjadi satu unityang dapat dipanggil.
 Saat fungsi dipanggil, blok kode di dalamnya dieksekusi.

Syntax umum :
 function namaFungsi(parameter1, parameter2, ...) {
// Blok kode yang akan dieksekusi saat fungsi
dipanggil
}

2.2 JavaScript DOM Manipulation & Event Listener

A. Pengenalan DOM
DOM (Document Object Model) adalah representasi struktur dokumen HTML
sebagai objek yang dapat dimanipulasi oleh bahasa pemrograman, seperti
JavaScript. Setiap elemen HTML dalam dokumen, seperti tag <body>, <p>,
<div>, dll., direpresentasikan sebagai objek dalam DOM. Dengan DOM, Anda
dapat membuat aplikasi web yang interaktif dan responsif, seperti perubahan konten
halaman, validasi formulir, atau menanggapi interaksi pengguna.
DOM dibangun dalam struktur hirarkis, di mana setiap elemen HTML adalah
simpul dalam pohon. Dokumen dimulai dengan simpul root yang disebut
document, yang memiliki elemen-elemen anak seperti <html>, <head>,
<body>, dst.
1. Mengakses Elemen DOM

JavaScript menyediakan berbagai cara untuk mengakses elemen-elemen DOM.

Seperti berikut :
• document.getElementById() : digunakan untuk mengakses
elemen berdasarkan ID.
• document.getElementByClassName() : digunakan untuk mengakses
elemen berdasarkan kelas.
• document.getElementByTagName() : digunakan untuk mengakses
elemen berdasarkan tag.
• Document.querySelector() : digunakan untuk mengakses
elemen menggunakan selektor CSS.
2. Memanipulasi Elemen DOM
Setelah mengakses elemen, Anda dapat melakukan berbagai manipulasi,
seperti mengubah konten HTML, menambah atau menghapus elemen, dan
mengubah atribut.
Contoh kode :
 l e t judul = document.getElementById('judul');

 judul.textContent = 'Halo, Dunia!';

B. Pengenalan Event Listener

Event listener adalah mekanisme dalam JavaScript yang digunakan untuk
mendengarkan atau menanggapi aksi atau peristiwa yang terjadi dalam elemen
HTML atau dokumen. Contohperistiwa termasuk klik mouse, menggulir halaman,
memasukkan input, dll. Dengan event listener, Anda dapat menjalankan fungsi
tertentu saat suatu peristiwa terjadi, membuat aplikasi web lebih interaktif dan
responsif.
Syntax umum :
 elemen.addEventListener(‘event’, function() {
// Blok kode yang akan dijalankan saat tombol diklik
});

Contoh kode :
 let tombol = document.getElementById(‘tombol’);
 tombol.addEventListener(“click”,function(){

alert(“Hallo surotong!!!”);

});
Dengan memahami konsep dan penggunaan DOM manipulation dan event
listener, Anda dapat membuat aplikasi web yang lebih interaktif, responsif, dan
dinamis. Ini memungkinkan Anda untuk meningkatkan pengalaman pengguna dan
membuat aplikasi yang lebih efektif dan menarik.
BAB III TUGAS PENDAHULUAN
BAB IV
IMPLEMENTASI
4.1 Source Code
1. buatlah dropdown menu dari HTML, CSS, dan JavaScript dari materi yang
telah kalian dapatkan
 HTML
<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-

scale=1.0" />

<link rel="stylesheet" href="drop.css" />

<title>Profile Dropdown</title>

</head>

<body>

<h1 class="navbar-logo" alt="logo">Telegram</h1>

<li><a href="#">Personal</a></li>

<li><a href="#">Channels</a></li>

<li><a href="#">Groups</a></li>

<li><a href="#">Unread</a></li>

</li>

<li>

<button id="pause">Pause</button>

</li>

</ul>

<div onclick="toggle()" class="profile-dropdown-btn">

<i class="fa-solid fa-circle"></i>

</div>

<span>Sakura Haruka

<i class="fa-solid fa-angle-down"></i>

</span>

</div>

<i class="fa-solid fa-user"></i>

Edit Profile

</a>

</li>

<i class="fa-solid fa-user-group"></i>

New Groups
</a>

</li>

<i class="fa-solid fa-address-book"></i>

Contacts

</a>

</li>

<i class="fa-solid fa-phone"></i>

Call

</a>

</li>

<i class="fa-regular fa-bookmark"></i>

Saved Messages

</a>

</li>

<hr />

<i class="fa-solid fa-arrow-right-from-

bracket"></i>

Log out
</a>

</li>

</ul>

</div>

</nav>

let play = document.getElementById("play");

let pause = document.getElementById("pause");

let audio;

function playMusic() {

audio = new Audio("wbk.mp3");

audio.play();

function pauseMusic() {

if (audio) {

audio.pause();

play.addEventListener("click", playMusic);

pause.addEventListener("click", pauseMusic);

</script>

</body>

</html>
 CSS
@import
url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200
;300;400;500&display=swap");

* {

margin: 0;

padding: 0;

list-style-type: none;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

body {

height: 100vh;

width: 100%;

background-color: #eeeeee;

.navbar {

display: flex;

align-items: center;

height: 70px;

background-color: #fff;

padding: 0 8%;

box-shadow: 0px 2px 8px 0px;

.navbar-logo {
cursor: pointer;

.navbar-list {

width: 100%;

text-align: right;

padding-right: 2rem;

.navbar-list li {

display: inline-block;

margin: 0 1rem;

.navbar-list li a {

font-size: 1rem;

font-weight: 500;

color: #393e46;

text-decoration: none;

.profile-dropdown {

position: relative;

width: fit-content;

.profile-dropdown-btn {

display: flex;

align-items: center;

justify-content: space-between;
padding-right: 1rem;

font-size: 0.9rem;

font-weight: 500;

width: 150px;

border-radius: 50px;

color: #393e46;

cursor: pointer;

border: 1px solid #65b8df;

transition: 0px 2px 8px 0px 0.2s ease-in, 0.2s ease-in,

border 0.3s;

.profile-dropdown-btn:hover {

background-color: rgba(29, 146, 182, 0.1);

box-shadow: 0px 2px 8px 0px;

.profile-img {

position: relative;

width: 3rem;

height: 3rem;

border-radius: 50%;

background: url(img/sakura\ haruka.jpeg);

background-size: cover;

.profile-img i {

position: absolute;

right: 0;

bottom: 0.3rem;
font-size: 0.5rem;

color: #1269bb;

.profile-dropdown-btn span {

margin: 0 0.5rem;

margin-right: 0;

.profile-dropdown-list {

position: absolute;

top: 68px;

width: 220px;

right: 0;

background-color: #fff;

border-radius: 10px;

max-height: 0;

overflow: hidden;

box-shadow: 0px 2px 8px 0px;

transition: max-height 0.5s;

.profile-dropdown-list hr {

border: 0.5px solid #1269bb;

.profile-dropdown-list.active {

max-height: 500px;

}
.profile-dropdown-list-item {

padding: 0.5rem 0rem 0.5rem 1rem;

transition: background-color 0.2s ease-in, padding-left 0.2s;

.profile-dropdown-list-item a {

display: flex;

align-items: center;

text-decoration: none;

font-size: 0.9rem;

font-weight: 500;

color: #393e46;

.profile-dropdown-list-item a i {

margin-right: 0.8rem;

font-size: 1.1rem;

width: 2.3rem;

height: 2.3rem;

background-color: #65b8df;

color: #fff;

line-height: 2.3rem;

text-align: center;

margin-right: 1rem;

border-radius: 50%;

transition: margin-right 0.3s;

.profile-dropdown-list-item:hover {

padding-left: 1.5rem;
background-color: rgba(72, 189, 173, 0.2);

 JavaScript
let profileDropdownList = document.querySelector(".profile-
dropdown-list");

let btn = document.querySelector(".profile-dropdown-btn");

let classList = profileDropdownList.classList;

const toggle = () => classList.toggle("active");

window.addEventListener("click", function (e) {

if (!btn.contains(e.target)) classList.remove("active");

});

Penjelasan :
Kode HTML yang dibuat menampilkan navigasi, dropdown menu untuk profil
pengguna. Navigasinya memiliki logo "Telegram" di kiri atas, diikuti dengan
beberapa pilihan menu seperti "Personal", "Channels", "Groups", "Bots", dan
"Unread". Di bagian kanan, terdapat tombol "Play" dan "Pause" untuk mengontrol
audio.
Dropdown menu profil pengguna muncul ketika pengguna mengeklik gambar
profil dan nama pengguna. Di dalamnya terdapat beberapa opsi seperti "Edit
Profile", "New Groups", "Contacts", "Call", "Saved Messages", dan "Log out",
dengan setiap opsi memiliki gambar ikon.
Di bagian bawah, terdapat dua script yang merujuk pada file JavaScript
eksternal, `drop.js`, yang mungkin mengatur perilaku dropdown menu profil
pengguna, serta fungsi-fungsi untuk memainkan dan menghentikan audio yang
diatur dalam file `wbk.mp3`.
2. Buatlah web ToDo sederhana yang dapat melakukan tambah, ubah, hapus,
dan tandai selesai, dan muat list tugas, menggunakan HTML, CSS, dan
JavaScript yang telah kalian dapatkan!
 HTML
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>To Do List Task</title>

<link rel="stylesheet" href="ToDo.css">

</head>

<body>

<h1>To Do List Task</h1>

</header>

<input type="text" class="todo-input" placeholder="add your task">

<button class="todo-button" type="submit">

<i class="fas fa-plus-circle fa-lg"></i>

</button>

<select name="todos" class="filter-todo">

<option value="completed">Completed</option>

<option value="incomplete">Incomplete</option>

</select>
</div>

</form>

</div>

</body>

</html>

 CSS
* {

margin: 0;

padding: 0;

box-sizing: border-box;

letter-spacing: 1px;

body {

background-color: rgb(106, 167, 187);

color: white;

font-family: "Poppins", sans-serif;

min-height: 100vh;

header {

font-size: 1.5rem;

}
header,

form {

min-height: 20vh;

display: flex;

justify-content: center;

align-items: center;

form input,

form button {

padding: 0.5rem;

padding-left: 1rem;

font-size: 1.8rem;

border: none;

background: #ffffff;

border-radius: 2rem;

form button {

color: rgb(85, 253, 231);

background: white;

cursor: pointer;

transition: all 0.3 ease;

margin-left: 0.5rem;

form button:hover {

color: white;

background: rgb(36, 168, 168);

}
.fa-plus-circle {

margin-top: 0.3rem;

margin-left: -8px;

.todo-container {

display: flex;

justify-content: center;

align-items: center;

.todo-list {

min-width: 30%;

list-style: none;

.todo {

margin: 0.5rem;

padding-left: 0.5rem;

background: rgb(255, 255, 255);

color: black;

font-size: 1.5rem;

display: flex;

justify-content: space-between;

align-items: center;

transition: 0.5s;

border-radius: 2rem;

}
.todo li {

flex: 1;

.trash-btn,

.complete-btn {

color: #ffffff;

border: none;

padding: 1rem;

cursor: pointer;

font-size: 1.5rem;

.complete-btn {

background: #2290e9;

.trash-btn {

border-top-right-radius: 1.75rem;

border-bottom-right-radius: 1.75rem;

background: rgb(171, 171, 171);

.todo-item {

padding: 0rem 0.5rem;

.fa-trash,

.fa-check-circle {

pointer-events: none;
}

.completed {

text-decoration: line-through;

opacity: 0.5;

.slide {

transform: translateX(10rem);

opacity: 0;

select {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

outline: none;

border: none;

.select {

margin: 1rem;

position: relative;

overflow: hidden;

border-radius: 50px;

select {

color: #000000;

width: 10rem;
height: 3.2rem;

cursor: pointer;

padding: 1rem;

.select::after {

content: "\25BC";

position: absolute;

background: rgb(0, 204, 255);

top: 0;

right: 0;

padding: 1rem;

pointer-events: none;

transition: all 0.3s ease;

.select::hover::after {

background: white;

color: rgb(0, 217, 255);

 JavaScript
const todoInput = document.querySelector(".todo-input");

const todoButton = document.querySelector(".todo-button");

const todoList = document.querySelector(".todo-list");

const filterOption = document.querySelector(".filter-todo");

document.addEventListener("DOMContentLoaded", getLocalTodos);

todoButton.addEventListener("click", addTodo);

todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);

function addTodo(event) {

event.preventDefault();

const todoDiv = document.createElement("div");

todoDiv.classList.add("todo");

const newTodo = document.createElement("li");

newTodo.innerText = todoInput.value;

newTodo.classList.add("todo-item");

todoDiv.appendChild(newTodo);

saveLocalTodos(todoInput.value);

const completedButton = document.createElement("button");

completedButton.innerHTML = '<i class="fas fa-check-

circle"></li>';

completedButton.classList.add("complete-btn");

todoDiv.appendChild(completedButton);

const trashButton = document.createElement("button");

trashButton.innerHTML = '<i class="fas fa-trash"></li>';

trashButton.classList.add("trash-btn");

todoDiv.appendChild(trashButton);

todoList.appendChild(todoDiv);

todoInput.value = "";

function deleteCheck(e) {

const item = e.target;

if (item.classList[0] === "trash-btn") {

const todo = item.parentElement;

todo.classList.add("slide");

removeLocalTodos(todo);

todo.addEventListener("transitionend", function () {

todo.remove();

});

if (item.classList[0] === "complete-btn") {

const todo = item.parentElement;

todo.classList.toggle("completed");

function filterTodo(e) {

const todos = todoList.childNodes;

todos.forEach(function (todo) {

switch (e.target.value) {

case "all":

todo.style.display = "flex";

break;

case "completed":

if (todo.classList.contains("completed")) {

todo.style.display = "flex";

} else {

todo.style.display = "none";

}
break;

case "incomplete":

if (!todo.classList.contains("completed")) {

todo.style.display = "flex";

} else {

todo.style.display = "none";

break;

});

function saveLocalTodos(todo) {

let todos;

if (localStorage.getItem("todos") === null) {

todos = [];

} else {

todos = JSON.parse(localStorage.getItem("todos"));

todos.push(todo);

localStorage.setItem("todos", JSON.stringify(todos));

function getLocalTodos() {

let todos;

if (localStorage.getItem("todos") === null) {

todos = [];

} else {

todos = JSON.parse(localStorage.getItem("todos"));

}
todos.forEach(function (todo) {

const todoDiv = document.createElement("div");

todoDiv.classList.add("todo");

const newTodo = document.createElement("li");

newTodo.innerText = todo;

newTodo.classList.add("todo-item");

todoDiv.appendChild(newTodo);

const completedButton = document.createElement("button");

completedButton.innerHTML = '<i class="fas fa-check-

circle"></li>';

completedButton.classList.add("complete-btn");

todoDiv.appendChild(completedButton);

const trashButton = document.createElement("button");

trashButton.innerHTML = '<i class="fas fa-trash"></li>';

trashButton.classList.add("trash-btn");

todoDiv.appendChild(trashButton);

todoList.appendChild(todoDiv);

});

function removeLocalTodos(todo) {

let todos;

if (localStorage.getItem("todos") === null) {

todos = [];

} else {

todos = JSON.parse(localStorage.getItem("todos"));

}
const todoIndex = todo.children[0].innerText;

todos.splice(todos.indexOf(todoIndex), 1);

localStorage.setItem("todos", JSON.stringify(todos));

Penjelasan :
Code HTML adalah sebuah tampilan untuk membuat daftar tugas atau "To
Do List". Di bagian atas terdapat judul "To Do List Task". Kemudian, terdapat
sebuah form dengan sebuah input teks di mana pengguna dapat menambahkan tugas
baru. Tombol dengan ikon tambah untuk menambahkan tugas baru dengan klik. Di
sampingnya, terdapat dropdown menu yang memungkinkan pengguna untuk
memfilter tugas berdasarkan status, seperti "All" (Semua), "Completed" (Sudah
Selesai), dan "Incomplete" (Belum Selesai).
Lalu, terdapat daftar tugas yang ditampilkan dalam sebuah kontainer.
Tugas-tugas akan muncul di dalamnya sesuai dengan input yang dimasukkan
pengguna. Setiap tugas memiliki kotak centang untuk menandai jika tugas tersebut
sudah selesai. Terakhir, terdapat sebuah script yang untuk mengatur interaksi antara
elemen-elemen, seperti menambahkan tugas baru, memfilter tugas, dan menandai
tugas sebagai selesai.
4.2 Hasil
1. halaman web dropdown menu

2. ToDo List Tugas

BAB V
PENUTUP
5.1 Analisa
Praktikan dapat memahami konsep dasar HTML, CSS, dan JavaScript dalam
membuat sebuah dropdown menu interaktif. Praktikan juga dapat mempelajari cara
mengatur tindakan yang diambil ketika pengguna mengklik pada elemen
dropdown, praktikan dapat memberikan pemahaman mendalam tentang bagaimana
memanfaatkan kombinasi HTML, CSS, dan JavaScript untuk menciptakan
pengalaman pengguna yang lebih interaktif dan dinamis.
Selain itu juga, praktikan dapat membuat daftar tugas atau "To Do List".
Praktikan bisa memberikan pemahaman praktis tentang bagaimana memanfaatkan
kombinasi dari ketiga bahasa pemrograman html, css, dan JavaScript untuk
membuat aplikasi web yang sederhana.

5.3 Kesimpulan
1. JavaScript merupakan komponen penting dalam pengembangan web yang
memungkinkan pengembang untuk menciptakan pengalaman pengguna
yang dinamis, interaktif, dan fungsional.
2. JavaScript memberikan interaktivitas pada halaman web, memungkinkan
pengguna untuk berinteraksi dengan elemen-elemen seperti dropdown
menu dan daftar tugas.
3. JavaScript memainkan peran penting dalam mengatur logika aplikasi
4. JavaScript digunakan untuk mengatur perilaku dropdown, seperti
menampilkan dan menyembunyikan menu dropdown
LAPORAN RESMI
MODUL V
PHP
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 03 MEI 2024

Disetujui : 17 MEI 2024

Asisten

AGASTIA DEVI WARDANI

22.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
PHP (PHP: Hypertext Proccesor) merupakan bahasa pemrograman web yang
disisipkan dalam script HTML (Hypertext Markup Language). PHP adalah sebuah
bahasa Script server-side yang biasa digunakan dengan bahasa HTML atau
dokumenya secara bersamaan untuk membuat sebuah aplikasi di web yang sangat
banyak kegunaannya. PHP merupakan bahasa yang digunakan dalam HTML dan
bekerja pada sisi server. PHP adalah bahasa pemrograman yang dinamis, yang
berarti kode PHP dieksekusi di sisi server sebelum hasilnya dikirimkan ke browser
pengguna. Ini memungkinkan pembuatan halaman web yang dinamis, berbasis
database, dan berinteraksi dengan pengguna.
PHP telah menjadi salah satu bahasa pemrograman web yang paling dominan
dan populer. Mulanya hanya sebagai alat sederhana untuk menciptakan halaman
web dinamis, namun kini PHP telah berkembang menjadi bahasa standar bagi
pengembang web di seluruh dunia. Dengan sintaks yang mirip dengan bahasa
pemrograman lain seperti C dan Java, PHP memungkinkan pengembang untuk
membuat situs web dinamis dengan mudah, termasuk fitur-fitur seperti pengolahan
formulir, mengakses basis data, dan menyajikan konten yang disesuaikan.

1.2 Tujuan
 Mampu menjelaskan perintah – perintah dasar PHP
 Mampu membuat aplikasi menggunakan perintah dasar PHP
 Mampu membuat situs web yang dinamis, dan berinteraksi dengan
pengguna
 Mampu mengembangkan kemampuan dalam membuat web menggunakan
database
BAB II
DASAR TEORI
2.1 PHP
Bahasa pemrograman PHP adalah sebuah bahasa scripting yang digunakan
secara luas dalam pengembangan web. Singkatan dari "Hypertext Preprocessor,"
PHP dirancang khusus untuk membangun aplikasi web dinamis dan interaktif. PHP
dapat disisipkan langsung ke dalam kode HTML dan dieksekusi di sisi server,
memungkinkan pengembang untuk membuat halaman web yang dinamis secara
efisien. Bahasa ini menawarkan banyak fitur yang kuat, termasuk kemampuan
untuk berinteraksi dengan berbagai jenis database, memproses formulir, mengelola
sesi pengguna, dan membuat konten dinamis berdasarkan kondisi dan input
pengguna. Keunggulan PHP juga terletak pada fleksibilitasnya yang tinggi serta
dukungan komunitas yang luas, membuatnya menjadi salah satu bahasa
pemrograman yang paling populer untuk pengembangan web.

2.2 Web Server

Cara menjalankan suatu script PHP tidak sama dengan cara menjalankan
HTML. Kita juga butuh Web Server. Web Server adalah server yang dijalankan di
dalam lingkungan lokal, biasanya pada komputer pengembang sendiri. Ini
memungkinkan pengembang untuk menguji dan mengembangkan situs web atau
aplikasi web secara lokal sebelum mereka diunggah ke server publik untuk
digunakan oleh pengguna. Web server mencakup perangkat lunak seperti Apache,
Nginx, atau Microsoft IIS yang berperan sebagai server web, sertateknologi seperti
PHP, MySQL, dan Perl yang biasanya digunakan dalam pengembangan web.
Dengan menggunakan web server, pengembang dapat menguji fungsionalitas situs
web mereka, men-debug kode, dan membuat perubahan tanpa mempengaruhi situs
web yang sebenarnya yang mungkin sedang dijalankan secara online. Ini
merupakan alat yang sangat berharga dalam pengembangan web karena
memberikan lingkungan yang aman dan terisolasi untuk mengembangkan dan
menguji kode sebelum diluncurkan secara live. Ada banyak aplikasi Web Server
yang sudah banyak dipakai, contohnya seperti XAMPP, WAMPServer, AMPPS.
2.3 Script Dasar PHP
Carja Penulisan skrip PHP ada dua macam, yaitu Embedded Script dan
Non Embedded Script. Contoh dari jenis skrip PHP diatas ditunjukkan dalam
gambar berikut :

2.4 Variable, Tipe Data, dan Operator

2.4.1 Variable
Sama seperti bahasa pemrograman lain, di PHP juga terdapat variabel guna
untuk menampung sebuah nilai. Variabel di PHP juga bersifat dinamis, yang berarti
Anda tidak perlu mendeklarasikan tipe data variabel saat Anda membuatnya. PHP
secara otomatis menentukan tipe data variabel berdasarkan nilai yang Anda berikan.
Ini memungkinkan fleksibilitas yang tinggi dalam penggunaan variabel.
Cara penggunaan Variabel di PHP ditandai dengan simbol “$”, contoh nya
seperti dibawah ini :

2.4.2 Tipe Data

Dalam PHP, tipe data mengacu pada jenis nilai yang dapat disimpan dalam
variabel. Berikut adalah beberapa tipe data yang umum digunakan dalam PHP:
1. String: Tipe data string digunakan untuk menyimpan teks. String dapat
diawali dengan tanda kutip tunggal (' ') atau ganda (" "). Contoh: `$kampus
= "Universitas Trunojoyo Madura";`.
2. Integer: Tipe data integer digunakan untuk menyimpan bilangan bulat.
Contoh: `$semester = 6;`.
3. Float: Tipe data float (atau double) digunakan untuk menyimpan bilangan
pecahan. Contoh: `$tinggi = 170.25;`.
4. Boolean: Tipe data boolean digunakan untuk menyimpan nilai kebenaran
(true atau false). Contoh: `$Praktikum = true;`.

2.4.3 Operator
• Operator Aritmatika
• Operator Logika
• Operator ini digunakan untuk membandingkan dua nilai variabel yang
bertipe boolean. Hasil yang didapat dari penggunaan logicaloperator adalah
boolean.
• Operator Assigment digunakan untuk memberikan/mengisi nilai ke
dalamvariabel tertentu. Operator yang digunakan adalah “=” yang berarti
operand kiri diberi nilai sama seperti operand kanan.

2.5 Struktur Kontrol

2.5.1 Percabangan
Struktur kontrol dalam PHP adalah mekanisme yang memungkinkan Anda
untuk mengontrol alur eksekusi program berdasarkan kondisi tertentu. Berikut
adalah beberapa struktur kontrol yang umum digunakan dalam PHP:
1. If: Pernyataan if digunakan untuk mengevaluasi suatu kondisi. Jika kondisi
tersebut benar (true), maka blok kode yang berada di dalam pernyataan if akan
dieksekusi. Contoh:

2. Pernyataan If-Else: Pernyataan if-else digunakan untuk mengevaluasikondisi,

dan jika kondisi tersebut benar (true), maka blok kode di dalampernyataan if
akan dieksekusi; jika tidak, blok kode di dalam pernyataanelse akan dieksekusi.
Contoh:

3. Pernyataan If-Elseif-Else: Pernyataan if-elseif-else digunakan untuk

mengevaluasi beberapa kondisi secara berurutan. Jika salah satu kondisibenar
(true), maka blok kode di dalam pernyataan tersebut akan dieksekusi. Contoh:

4. Pernyataan Switch : Pernyataan switch digunakan untuk mengevaluasi sebuah

ekspresi dan menjalankan blok kode yang sesuai dengan nilai ekspresi tersebut.
Contoh:
2.5.2 Perulangan
Struktur kontrol perulangan dalam PHP memungkinkan Anda untuk
mengeksekusi blok kode secara berulang berdasarkan kondisi tertentu. Berikut
adalah beberapa struktur kontrol perulangan yang umum digunakan dalam PHP:
1. Pernyataan While: Pernyataan while mengeksekusi blok kode selamakondisi
yang ditentukan adalah benar (true). Contoh:
<?php
$angka = 1;
while ($angka <= 5) {
echo "Iterasi ke-$angka <br>";
$angka++;
}?>

Pada contoh di atas, blok kode akan dieksekusi selama nilai `$angka`
kurang dari atau sama dengan 5.
2. Pernyataan Do-While: Pernyataan do-while mirip dengan pernyataan while,
namun blok kode akan dieksekusi setidaknya satu kali sebelum kondisi
dievaluasi. Contoh:
<?php
$angka =
1;do {
echo "Iterasi ke-$angka <br>";
$angka++;
} while ($angka <= 5);
?>
Pada contoh di atas, blok kode akan dieksekusi sekali, bahkan jika
kondisi awalnya tidak benar.
3. Pernyataan For: Pernyataan for digunakan untuk mengeksekusi blok kode
sejumlah iterasi tertentu. Contoh:
<?php
for ($angka = 1; $angka <= 5; $angka++)
{echo "Iterasi ke-$angka <br>";
}
?>
Pada contoh di atas, kita menentukan inisialisasi variabel `$angka`, kondisi
untuk melanjutkan perulangan, dan ekspresi untuk menginkrementasi variabel
`$angka`.
4. Pernyataan Foreach: Pernyataan foreach digunakan untuk mengulangi
elemen-elemen dalam sebuah array. Contoh:
<?php
$buah = array("apel", "pisang",
"jeruk");
foreach ($buah as $item) {
echo $item . "<br>";
}
?>
Pada contoh di atas, perulangan foreach akan menampilkan setiapelemen
dalam array `$buah`.

2.5.3 Break, Continue, EXIT

A. Break
Break berfungsi memaksakan aliran eksekusi untuk keluar dari blok
pengulangan tersebut. Contoh:

B. Continue
Continue berfungsi hampir sama dengan break hanya saja continue
tidak memaksakan pengulangan untuk berhenti tetapi melanjutkan pada
pengulangan untuk nilai perhitungan berikutnya. Contoh:
C. Exit
Exit tidak sama dengan break maupun continue. Break berfungsi untuk
menghentikan eksekusi file PHP dimanapun letak perintah break

2.6 Array
Array dalam PHP berbeda dengan array yang ada dalam bahasa
pemrograman lain seperti Pascal atau C, karena array dalam bahasa pemrograman
lain memiliki fungsi hanya sebagai penampung nilai dan indeks dalam t ipe yang
sama sedangkan array dalam PHP sebagai penampung nilai dan indeks dalam t ipe
yang bergantung pada pendeklasian oleh programmer. Cara penulisan array sebagai
berikut :
$nama_array = array(“NilaiA”,”NilaiB”,…,”NilaiN”;
Atau dengan index :
$nama_array = array(“index0 => “nilai 0”,”index1 => “nilai 1”);

2.7 Fungsi
Fungsi dimanfaatkan untuk menyederhanakan penulisan kode program yang
sama dengan cara menyimpan kode tersebut dalam sebuah nama fungsi. Sehingga
Fungsi sebenarnya adalah sebuah bagian kode program yang ditujukan
untukmelaksanakan suatu tugas tertentu. Keuntungan menggunakan fungsi
diantaranya jika ada perubahan proses pengolahan data maka cukup mengganti
dibagian fungsi saja, hanya cukup mengetik kode program sekali saja untuk skrip
yang smaa dan memudahkan pembaca untuk membaca program karena fungsi
memiliki skrip kode program yang pendek. Berikut cara membuat fungsi pada PHP.

<?php
Function nama_fungsi(parameter){
Statemen
}
?>
Lalu fungsi tersebut bisa dipanggil menggunakan code berikut :
<?php echo nama_fungsi(parameter); ?>
BAB III TUGAS PENDAHULUAN
Bab 3
BAB IV
IMPLEMENTASI
4.1 Source Code
1. Buat lah fitur login menggunakan PHP. Buatlah 2 halaman setelah login,
buat system ketika pengguna belum login tidak dapat masuk ke halaman
kedua atau halaman home.
 Login.php
<?php

session_start();

if(isset($_SESSION['username'])) {

header("Location: home.php");

exit;

if(isset($_POST['submit'])) {

$username = $_POST['username'];

$password = $_POST['password'];

if($username === 'ryuno' && $password === 'sasaki') {

$_SESSION['username'] = $username;

header("Location: home.php");

exit;

} else {

$gagal = "<script>alert('anda gagal login.')</script>";

<!DOCTYPE html>
<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Login</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

margin: 0;

padding: 0;

.container {

width: 30%;

margin: 100px auto;

background-color: lightcyan;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

color: #333;

p {

margin: 10px 0;
color: #777;

form {

text-align: center;

input[type="text"],

input[type="password"] {

width: 50%;

padding: 10px;

margin: 5px 0 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

font-size: 16px;

input[type="submit"] {

padding: 10px;

margin: 5px 0 10px;

background-color: #007bff;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

width: 30%;

color: white;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s;

}

</style>

</head>

<body>

<h2>Silahkan login terlebih dahulu</h2>

<?php if(isset($gagal)) { ?>

<p class="gagal"><?php echo $gagal; ?></p>

<?php } ?>

<form action="" method="post">

<p>Username</p>

<input type="text" name="username">

<p>Password</p>

<input type="password" name="password"><br><br>

<input type="submit" name="submit">

</form>

</div>

</center>

</body>

</html>

Penjelasan :
Program yang di buat yaitu menampilkan halaman login untuk user atau
pengguna. Pengguna perlu memasukkan username dan password untuk
melakukan login, untuk username nya yaitu ‘ryuno’ dan password nya yaitu
‘sasaki’. Memulai sesi dengan menggunakan session_start, lalu mengecheck
apakah pengguna sudah login atau belum. Jika sudah, akan di arahkan ke
halaman home.php.
Jika belum login, skrip akan memeriksa apakah form masuk telah di
submit atau belum, jika sudah akan mengambil nilai username dan password
yang di inputkan pengguna. Lalu mengechek apakah username dan password
yang di masukkan sesuai dengan yang telah di tentukan atau tidak, jika tidak
maka akan muncul tulisan anda gagal login. Jika sesuai akan di arahkan ke
halaman home.php.

2. Halaman home, terdapat kata sambutan dan menampilkan nama dari user
yang login, contoh : "Selamat datang namauser”.
 Home.php
<?php

session_start();

if(!isset($_SESSION['username'])) {

header("Location: login.php");

exit;

$username = $_SESSION['username']

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<title>Home</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

margin: 0;

padding: 0;

.home {

width: 300px;

margin: 100px auto;

background-color: lightcyan;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

a {

color: #777;

text-decoration: none;

a:hover {

text-decoration: underline;

color: blue;

</style>

</head>

<h2>Selamat Datang <?php echo $username;

?></h2><br><br>

<p><a href="mahasiswa.php">Lihat Data

Mahasiswa</a></p><br>

<p><a href="logout.php">Logout</a></p>

</div>

</center>

</body>

</html>

Penjelasan :
Kode program yang di buat yaitu untuk menampilkan halaman home
setelah pengguna berhasil login pada halaman login sebelumnya. Pada bagian
atas terdapat session_start, lalu dilakukan pengecheckan apakah username
telah di set atau belum, jika belum berarti penggunanya belum login, dan akan
di arahkan kembali ke halaman login.php.
Jika session 'username' sudah diset atau pengguna sudah login, maka
script akan menyimpan nilai dari 'username' ke dalam variabel $username.
kode HTML yang ditampilkan memiliki tampilan dengan pesan selamat
datang yang menampilkan username pengguna yang berhasil login. Selain itu,
terdapat juga dua link, yaitu "Lihat Data Mahasiswa" yang mengarahkan ke
halaman mahasiswa.php dan "Logout" yang mengarahkan ke halaman
logout.php untuk keluar dari sesi login.
3. Halaman kedua menampilkan sebuah data mahasiswa seperti nim, nama,
alamat, angkatan, dll. Menggunakan table
 Data Mahasiswa
<?php

session_start();

if (!isset($_SESSION['username'])) {

header("Location: login.php");

exit;

if (!isset($_SESSION['dataMahasiswa'])) {

$_SESSION['dataMahasiswa'] = array(

array("23002", "Radhina", "Bangkalan", "2023"),

array("23003", "Madu", "Bandung", "2023"),

);

$dataMahasiswa =& $_SESSION['dataMahasiswa'];

function hapusData($index) {

global $dataMahasiswa;

array_splice($dataMahasiswa, $index, 1);

if(isset($_GET['action']) && $_GET['action'] == 'delete') {

hapusData($_GET['index']);

?>
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Data Mahasiswa</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

.mahasiswa {

background-color: #f9f9f9;

border-radius: 10px;

padding: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

margin-top: 20px;

.mahasiswa h2 {

text-align: center;

color: #333;
}

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

th, td {

border: 1px solid #ddd;

padding: 10px;

text-align: left;

th {

background-color: #5AB2FF;

td {

background-color: #CAF4FF;

.button {

text-align: center;

margin-top: 20px;

.button button {

background-color: #007bff;

color: #fff;
padding: 10px 20px;

border: none;

border-radius: 5px;

margin-right: 10px;

text-decoration: none;

cursor: pointer;

.button a {

color: #fff;

text-decoration: none;

</style>

</head>

<body>

<h2>Data Mahasiswa</h2>

<table>

<tr>

<th>Alamat</th>

<th>Angkatan</th>

<th>Action</th>

</tr>

<?php foreach ($dataMahasiswa as $index =>

$mahasiswa): ?>

<tr>

<td><?= $mahasiswa[0] ?></td>

<td><?= $mahasiswa[2] ?></td>

<td><?= $mahasiswa[3] ?></td>

<td>

<a href='edit.php?index=<?= $index

?>'>Edit</a>

<a href='?action=delete&index=<?=
$index ?>'>Delete</a>

</td>

</tr>

<?php endforeach; ?>

</table><br><br>

<a href="tambah.php">Tambah Data</a><br>

</button>

<a href="logout.php">Logout</a>

</button>

</div>

</body>

</html>

Penjelasan :
Program ini untuk menampilan halaman data mahasiswa, yang tersmpan
dalam session, data di simpan dalam bentuk array. Sama seperti halaman home,
terdapat session start, dan melakukan pengecheckan apakah username sudah di
set atau belum, jika belum akan di arahkan kehalaman login.php. Selanjutnya,
dilakukan pengecekan apakah session 'dataMahasiswa' sudah diset. Jika belum,
maka dibuat array dua dimensi yang berisi informasi dari beberapa mahasiswa
dan disimpan ke dalam session 'dataMahasiswa'.
hapusData($index) untuk menghapus data mahasiswa berdasarkan index
yang diberikan. Menggunakan parameter index yang kemudian menggunakan
array_splice() untuk menghapus data dengan index yang sesuai dari array
$dataMahasiswa. Jika terdapat parameter GET 'action' yang bernilai 'delete'
dan juga terdapat index yang diberikan, maka dilakukan pemanggilan fungsi
hapusData() untuk menghapus data mahasiswa pada index tersebut.
Kode html menampilkan tabel yang berisi data mahasiswa, terdapat
tombol edit dan delete untuk setiap baris data. Tombol Edit akan mengarahkan
pengguna ke halaman edit.php dengan membawa informasi index dari
mahasiswa yang akan diedit. Sedangkan tombol Delete akan menghapus data
mahasiswa yang sesuai dengan index yang diberikan.
Terdapat juga dua tombol di bagian bawah tabel, yaitu "Tambah Data"
yang mengarahkan ke halaman tambah.php untuk menambahkan data
mahasiswa baru, dan "Logout" yang mengarahkan ke halaman logout.php
untuk keluar dari sesi login.
4. Membuat system CRUD pada halaman kedua
 Tambah Data
<?php

session_start();

if (!isset($_SESSION['username'])) {

header("Location: login.php");

exit;

if (!isset($_SESSION['dataMahasiswa'])) {

$_SESSION['dataMahasiswa'] = array(

array("23002", "Radhina", "Bangkalan", "2023"),

array("23003", "Madu", "Bandung", "2023"),

);

$dataMahasiswa =& $_SESSION['dataMahasiswa'];

function tambahData($nim, $nama, $alamat, $angkatan) {

global $dataMahasiswa;

$dataMahasiswa[] = array($nim, $nama, $alamat, $angkatan);

if(isset($_POST['submit'])) {

tambahData($_POST['nim'], $_POST['nama'], $_POST['alamat'],

$_POST['angkatan']);

header("Location: mahasiswa.php");

exit;

?>
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Tambah Data Mahasiswa</title>

<style>

* {

margin: 0;

padding: 0;

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

.tambah-data {

background-color: #EEF7FF;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px auto;

max-width: 500px;

.tambah-data h3 {

text-align: center;
color: #333;

.form-data {

margin-bottom: 20px;

.form-data label {

display: block;

margin-bottom: 5px;

color: #333;

.form-data input {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

font-size: 16px;

.tambah-data a {

text-align: center;

color: #007bff;

text-decoration: none;

margin-top: 20px;

</style>
</head>

<body>

<h3>Tambah Data Mahasiswa</h3>

<form method="post" action="">

<label for="nim">NIM : </label>

<input type="number" name="nim"

placeholder="NIM" required><br><br>

</div>

<label for="nama">Nama : </label>

<input type="text" name="nama"

placeholder="Nama" required><br><br>

</div>

<label for="alamat">Alamat : </label>

<input type="text" name="alamat"

placeholder="Alamat" required><br><br>

</div>

<label for="angkatan">Angkatan : </label>

<input type="number" name="angkatan"

placeholder="Angkatan" required><br><br>

</div>

<input type="submit" name="submit"

value="Tambah"><br><br>

</form>

<a href="mahasiswa.php">Kembali</a>

</div>

</body>

</html>
Penjelasan :
Kode ini untuk melakukan tambah data mahasiswa, data yang di tambah
akan di simpan ke dalam session. Terdapat pengecheckan username, apakah
sudah login atau belum. Jika belum akan di arahkan ke halaman login.php.
Fungsi tambahData($nim, $nama, $alamat, $angkatan) digunakan
untuk menambahkan data mahasiswa baru ke dalam array $dataMahasiswa.
Fungsi ini menggunakan parameter NIM, Nama, Alamat, dan Angkatan dari
form input sebagai input untuk menambahkan data mahasiswa baru ke dalam
array.
Terdapat pengecekan apakah terdapat input dari form submit. Jika iya,
maka dilakukan pemanggilan fungsi tambahData() dengan menggunakan
nilai dari form input NIM, Nama, Alamat, dan Angkatan. Setelah itu,
pengguna akan diarahkan kembali ke halaman "Data Mahasiswa"
(mahasiswa.php) untuk melihat data mahasiswa yang telah ditambahkan.
Kode html menampilkan form dengan input NIM, Nama, Alamat, dan
Angkatan yang diperlukan untuk menambahkan data mahasiswa baru. Form
tersebut menggunakan method "post" untuk mengirim data dan action yang
kosong agar form submit ke halaman itu sendiri. Selain itu, terdapat juga link
"Kembali" yang mengarahkan pengguna kembali ke halaman "Data
Mahasiswa".

 Edit Data
<?php

session_start();

if (!isset($_SESSION['username'])) {

header("Location: login.php");

exit;

if (!isset($_SESSION['dataMahasiswa'])) {
$_SESSION['dataMahasiswa'] = array(

array("23002", "Radhina", "Bangkalan", "2023"),

array("23003", "Madu", "Bandung", "2023"),

);

$dataMahasiswa =& $_SESSION['dataMahasiswa'];

function editData($nimToEdit, $nim_edit, $nama_edit,

$alamat_edit, $angkatan_edit) {

global $dataMahasiswa;

foreach ($dataMahasiswa as $index => &$mahasiswa) {

if ($mahasiswa[0] == $nimToEdit) {

$mahasiswa[0] = $nim_edit;

$mahasiswa[1] = $nama_edit;

$mahasiswa[2] = $alamat_edit;

$mahasiswa[3] = $angkatan_edit;

return;

if(isset($_POST['simpan'])) {

editData($_POST['nim_to_edit'], $_POST['nim_edit'],
$_POST['nama_edit'], $_POST['alamat_edit'],
$_POST['angkatan_edit']);

header("Location: mahasiswa.php");

exit;

$index = $_GET['index'];
$mahasiswaToEdit = $dataMahasiswa[$index];

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Edit Data Mahasiswa</title>

<style>

* {

margin: 0;

padding: 0;

body {

font-family: Arial, sans-serif;

background-color: #f8f9fa;

.edit-mhs {

background-color: #EEF7FF;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px auto;

max-width: 500px;

}
.edit-mhs h2 {

text-align: center;

color: #333;

.edit-data {

margin-bottom: 20px;

.edit-data label {

display: block;

margin-bottom: 5px;

color: #333;

.edit-data input {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

font-size: 16px;

.edit-mhs a {

text-align: center;

color: #007bff;

text-decoration: none;

margin-top: 20px;

}
</style>

</head>

<body>

<h2>Edit Data Mahasiswa</h2>

<form method="post" action="">

<input type="hidden" name="nim_to_edit" value="<?=

$mahasiswaToEdit[0] ?>">

<label for="nim">NIM baru : </label>

<input type="number" name="nim_edit" value="<?=

$mahasiswaToEdit[0] ?>" required><br><br>

</div>

<label for="nama">Nama baru : </label>

<input type="text" name="nama_edit" value="<?=

$mahasiswaToEdit[1] ?>" required><br><br>

</div>

<label for="alamat">Alamat baru : </label>

<input type="text" name="alamat_edit"

value="<?= $mahasiswaToEdit[2] ?>" required><br><br>

</div>

<label for="angkatan">Angkatan baru : </label>

<input type="number" name="angkatan_edit"

value="<?= $mahasiswaToEdit[3] ?>" required><br><br>

</div>

<input type="submit" name="simpan" value="Simpan

Data"><br><br>

</form>
<a href="mahasiswa.php">Kembali</a>

</div>

</body>

</html>

Penjelasan :
Halaman ini untuk mengedit data mahasiswa yang akan di edit, Fungsi
editData($nimToEdit, $nim_edit, $nama_edit, $alamat_edit, $angkatan_edit)
digunakan untuk melakukan edit pada data mahasiswa dengan menggunakan
NIM untuk mengidentifikasi data yang akan diubah. Fungsi ini akan mencari
data mahasiswa dengan NIM yang sesuai, kemudian mengganti data dengan
nilai yang baru sesuai dengan input yang diberikan.
Jika terdapat input dari form submit, maka dilakukan pemanggilan
fungsi editData() dengan menggunakan nilai NIM yang akan diubah dan nilai
baru untuk NIM, Nama, Alamat, dan Angkatan. Setelah proses edit selesai,
pengguna akan diarahkan kembali ke halaman "Data Mahasiswa"
(mahasiswa.php) untuk melihat data mahasiswa yang telah diperbarui.
Kode html menampilkan form dengan input NIM baru, Nama baru,
Alamat baru, dan Angkatan baru yang diperlukan untuk melakukan edit data
mahasiswa. Form menggunakan method "post" untuk mengirim data dan
action yang kosong agar form submit ke halaman itu sendiri. Terdapat juga
input hidden untuk menyimpan nilai NIM yang asli sebelum diubah. Selain
itu, terdapat link "Kembali" yang mengarahkan pengguna kembali ke
halaman "Data Mahasiswa".
5. Buatlah fitur logout
 Logout
<?php

session_start();

session_destroy();

header("Location: login.php");

exit;

Penjelasan :
Kode yang di buat untuk mengakhiri atau menghapus session pengguna
dan mengarahkannya ke halaman login.php, fungsi session_start untuk
memulai atau mengaktifkan session pada halaman tersebut. Kemudian, fungsi
session_destroy digunakan untuk menghapus semua data yang terkait dengan
pengguna yang sedang aktif. fungsi header("Location: login.php") digunakan
untuk melakukan redirect atau pengalihan halaman ke halaman login.php
setelah sesi selesai dihapus.
4.2 Hasil
1. Login

2. Home

3. Data Mahasiswa
4. Tambah Data

5. Edit data
BAB V
PENUTUP
5.1 Analisa
Praktikan dapat memahami konsep dasar php. Seperti variable, penggunaan
fungsi, pengkondisian. Praktikan juga dapat memberikan pengalaman membuat
program php sederhana, tanpa database, dan menyimpan data dalam bnetuk array.
Praktikan juga mengetahui aturan penulisan program php yang benar.
Praktikan dapat membuat halaman login untuk melakukan login ke dalam
system. Praktikan dapat membuat halaman home untuk pengguna yang berhasil
login, dan memberikan sambutan dengan username yang berhasil login. Praktikan
dapat membuat tampilan data mahasiswa dan membuat fitur CRUD dan di simpan
dalam bentuk array. Praktikan juga dapat membuat fitur logout menggunakan php.

5.2 Kesimpulan
1. PHP adalah sebuah bahasa pemrograman server-side yang digunakan untuk
membuat aplikasi web dinamis.
2. PHP dapat berjalan di server web dan menghasilkan output yang dapat
diakses melalui web browser.
3. Praktikan dapat belajar konsep dasar PHP seperti variabel, penggunaan
fungsi, logika pengkondisian, dan penggunaan session.
4. PHP mendukung pengelolaan session untuk menyimpan data pengguna
secara sementara
LAPORAN RESMI
MODUL VI
HTML FORM DAN PHP KONEKSI
PEMROGRAMAN BERBASIS WEB

NAMA : SUNDA MADU BUANA

N.R.P : 230441100003
DOSEN : ACHMAD YASID S.Kom. M.Kom
ASISTEN : AGASTIA DEVI WARDANI
TGL PRAKTIKUM : 17 MEI 2024

Disetujui : 23 MEI 2024

Asisten

AGASTIA DEVI WARDANI

22.04.411.00145

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
BAB I
PENDAHULUAN
1.1 Latar Belakang
HTML Form adalah salah satu elemen fundamental dalam pengembangan web
yang memungkinkan pengguna untuk berinteraksi dengan halaman web. Dengan
menggunakan tag-tag seperti `<form>`, `<input>`, dan `<textarea>`, pengembang
dapat membuat formulir interaktif yang meminta pengguna untuk memasukkan
informasi seperti nama, alamat email, atau pesan. Setelah pengguna mengisi
formulir tersebut, data yang dimasukkan dapat dikirimkan ke server web untuk
diproses lebih lanjut. Di sisi server, PHP adalah bahasa pemrograman server-side
yang sering digunakan untuk memproses data yang dikirim melalui formulir HTML.
Salah satufungsi utama PHP adalah untuk mengelola koneksi ke database.
Dengan menggunakan ekstensi seperti MySQLi pengembang dapat membuat
koneksi ke database, dan mengambil atau menyimpan data. Koneksi database
merupakan langkah krusial dalam pengembangan aplikasi berbasis web yang
memerlukan penyimpanan dan pengelolaan data. Dalam konteks PHP, koneksi ke
database biasanya dilakukan menggunakan ekstensi MySQLi. MySQLi
menawarkan cara prosedural dan berorientasi objek untuk berinteraksi dengan
database MySQL.

1.2 Tujuan
 Mahasiswa mampu memahami HTML form dan metodenya
 Mahasiswa mampu memahami koneksi PHP dengan database
 Mahasiswa mampu memahami Create, Read, Update, dan Delete
BAB II
DASAR TEORI
2.1 HTML Form Dalam PHP
2.1.1 Apa itu html form?
HTML form adalah bagian dari halaman web yang memungkinkan pengguna
untuk mengirimkan data ke server. Ini seperti kotak kosong di halaman web di mana
pengguna dapatmengetikkan informasi seperti nama, alamat email, atau pesan

2.1.2 Bagaimana cara membuat html form?

Mari kita lihat contoh sederhana. Misalkan kita ingin membuat formulir untuk
pengguna mengirimkan nama dan umur serta jenis kelamin mereka :

Di sini, kita menggunakan tag <form> untuk membuat formulir. Atribut

action menentukan ke mana data akan dikirim ketika formulir dikirimkan, dan
atribut method menentukan metode yang akan digunakan untuk mengirimkan
data. Dalam hal ini, kita menggunakan metode POST.

2.1.3 Bagaimana php mengelola data dari form?

Kita perlu menggunakan PHP untuk mengambil data yang dikirimkan dan
melakukan sesuatu dengan informasi tersebut. Misalnya, kita bisa menyimpannya
di database atau menampilkannya kembali kepada pengguna. Berikut contoh
bagaimana kita bisa melakukan itu dalam file “proses.php” :
<body>
<h2>Data yang Dikirimkan</h2>

<?php

>> Memeriksa apakah data sudah dikirimkan melalui

metode POSTif ($_SERVER["REQUEST_METHOD"] ==
"POST") {
>> Mengambil nilai dari formulir
$nama = $_POST["nama"];
$umur = $_POST["umur"];
$kota = $_POST["kota"];

>> Menampilkan nilai

yang dikirimkanecho
"Nama: " . $nama .
"<br>";

echo "Umur: " . $umur . "<br>";

echo "Kota: " . $kota . "<br>";
}
?>
</body>

Di sini, kita menggunakan $_POST["nama"], $_POST["umur"] dan

$_POST[“kota”] untuk mengambil nilai yang dikirimkan melalui formulir. Kita
kemudian menampilkan nilai tersebut kembali kepada pengguna.
Apa yang Terjadi Ketika Form Dikirimkan? Ketika pengguna mengklik
tombol "Kirim" pada formulir, data yang dimasukkan oleh pengguna akan
dikirimkan ke proses.php melalui metode POST. Kemudian, PHP akan
menjalankan kode di dalam proses.php untuk mengolah data tersebut.
2.2 PHP KONEKSI
2.2.1 Database
Koneksi database adalah cara bagi program komputer untuk berbicara dengan
database.Kamu bisa membayangkan database seperti rak buku besar yang berisi
banyak informasi, dankoneksi database adalah cara untuk membuka rak tersebut
dan mencari atau menambahkan informasi di dalamnya

2.2.2 MENGAPA KITA BUTUH KONEKSI DATABASE?

Kita butuh koneksi database karena kadang-kadang kita ingin menyimpan
banyak informasi, seperti nama, usia, atau gambar, dan kita ingin menyimpannya
di tempat yang aman dan mudah diakses. Database memungkinkan kita untuk
melakukan itu!

2.2.3 BAGAIMANA CARA MEMBUAT KONEKSI DATABASE DI PHP?

Untuk terhubung dengan database, kita menggunakan PHP. Kita memberi
tahu PHP di mana database itu berada dan bagaimana cara masuk ke dalamnya.
Mari kita lihat contohnya:

<?php
>> Informasi tentang database
$servername = "localhost"; >> Ini adalah alamat server
$username = "root"; >> Ini adalah nama pengguna
$password = "passwordku"; >> Ini adalah kata sandi
$database = “nama_database”; >> ini adalah nama dari database

>> Membuat koneksi

$conn = new mysqli($servername, $username, $password,
$database);

>> Memeriksa koneksi

if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
echo "Koneksi berhasil!";
?>
Di sini, kita menggunakan informasi seperti alamat server database, nama
pengguna, katasandi, dan nama database untuk membuat koneksi ke database.
Setelah terkoneksi dengan database, kita bisa melakukan banyak hal, seperti
menambahkan data baru, mengambil data yang sudah ada, mengubah data, atau
menghapusnya. Ini memungkinkan kita untuk melakukan banyak hal yang
keren, sepertimembuat aplikasi web atau game yang lebih interaktif.

2.3 MENGGUNAKAN QUERY UNTUK BERINTERAKSI DENGAN

DATABSE
Setelah terhubung dengan database, kita dapat menggunakan "pertanyaan"
atau query untuk mengambil, menambahkan, mengubah, atau menghapus data
dari database. Ini seperti bertanya kepada petugas perpustakaan untuk menemukan
buku tertentu.

2.3.1 Mengirimkan Data Pada Database (Create)

Operasi create dalam PHP berkaitan dengan membuat atau menambahkan
data baru ke dalam database. Ini biasanya terjadi ketika pengguna mengirimkan
formulir dengan informasi baru, seperti menambahkan entri baru ke dalam buku
alamat, mengirimkan pesan baru, atau membuat akun pengguna.
Mari kita lihat contoh sederhana untuk menyimpan data ke dalam database.
Misalkan kita ingin menyimpan data pengguna baru ke dalam tabel "pengguna".
Berikut contohnya:
<?php
>> Data yang ingin disimpan
$nama = "Sri";
$umur = 36;

>> Membuat koneksi

$conn = new mysqli("localhost", "username", "password",
"nama_database");
>> Memeriksa koneksi
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
>> Membuat query untuk menyimpan data
$sql = "INSERT INTO guru (nama, umur) VALUES ('$nama', '$umur')";

>> Menjalankan query

if ($conn->query($sql) === TRUE) {
echo "Data berhasil disimpan ke database.";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
>> Menutup koneksi
$conn->close();
?>

2.3.2 Mengambil Data Dari Database (Read)

Mari kita ambil contoh sederhana untuk mengambil data dari database.
Misalkan kita memiliki tabel "pengguna" yang berisi nama dan umur pengguna. Kita
ingin mengambil semua data dari tabel tersebut dan menampilkannya. Berikut
contohnya:

<?php
>> Membuat koneksi
$conn = new mysqli("localhost", "username", "password",
"nama_database");

>> Memeriksa koneksi

if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
>> Membuat query untuk mengambil data
$sql = "SELECT * FROM guru";
$result = $conn->query($sql);

>> Memeriksa apakah ada data yang

ditemukanif ($result->num_rows > 0)
{
>> Menampilkan data baris per baris
while($row = $result->fetch_assoc())
{
echo "Nama: " . $row["nama"]. " - Umur: " . $row["umur"]. "<br>";
}
} else {
echo "Tidak ada data yang ditemukan.";
}
>> Menutup koneksi
$conn->close();
?>

2.3.3 Memperbarui Data Pada Database (Update)

Operasi menghapus data pada database (Delete) berkaitan dengan menghapus
entri ataubaris data yang sudah ada dalam database. Ini terjadi ketika pengguna
ingin menghapus informasi atau entitas tertentu dari database, seperti menghapus
data guru dari daftar guru. Berikut adalah langkah-langkah umum untuk
melakukan operasi delete pada databasedengan studi kasus pada kolom nama dan
umur dalam tabel guru:
<?php

$id_guru = 3;

>> Data yang ingin diubah

$nama_baru = Eko;
$umur_baru = 40;

>> Membuat koneksi ke database

$conn = new mysqli("localhost", "username", "password",
"nama_database");
>> Memeriksa koneksi
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}

>> Menyiapkan pernyataan SQL untuk melakukan update data pada

tabel guru
$sql = "UPDATE guru SET nama='$nama_baru',
umur='$umur_baru' WHERE id='$id_guru'";

>> Menjalankan pernyataan SQL

if ($conn->query($sql) === TRUE) {
echo "Informasi guru berhasil diperbaharui.";
} else {

2.3.4 Menghapus Data Pada Database (Delete)

<?php
>> Untuk mengenali data
$id_guru = 2 ;

>> Membuat koneksi ke database

$conn = new mysqli("localhost", "username", "password",
"nama_database");

>> Memeriksa koneksi

if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
>> Menyiapkan pernyataan SQL untuk menghapus data pada tabel
guru
$sql = "DELETE FROM guru WHERE id='$id_guru'";

>> Menjalankan pernyataan SQL

if ($conn->query($sql) === TRUE) {
echo "Data guru berhasil dihapus dari database.";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

>> Menutup koneksi

$conn->close();
?>
BAB III TUGAS PENDAHULUAN
BAB IV
IMPLEMENTASI
4.1 Source Code
Dengan menggunakan php dan html, buatkan form inputan untuk data
mahasiswa [nama, nim, umur, jenis kelaim, prodi, jurusan, asal kota] yang
dapat ditambahkan pada database yang ada, serta sajikan data yang sudah ada (di
database) pada html tabel yang anda buat pada halaman yang berbeda dan data
tersebut dapat di ubah serta juga dapat dihapus dari halamantabel tersebut.{ terdapat
CSS + JavaScript == nilai tambah}

 Style CSS
body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

h2, h3 {

color: #050505;

a {

text-decoration: none;

color: #35caca;

font-weight: bold;

a:hover {

color: #008cba;

table {

width: 100%;
border-collapse: collapse;

margin: 20px 0;

font-size: 18px;

text-align: center;

border: 1px solid #3d3c3c;

padding: 12px;

table, td, tr {

border: 1px solid #3d3c3c;

padding: 12px;

td a {

padding: 5px 10px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: #008cba;

color: white;

td a:hover {

border-color: #008cba;

color: #333;

background-color: #ffffff;

form {

border-radius: 8px;

width: 100%;

max-width: 400px;

input[type="text"],

input[type="number"] {
width: 100%;

padding: 8px;

border: 1px solid #a76767;

border-radius: 4px;

box-sizing: border-box;

input[type="submit"] {

width: 50%;

padding: 10px;

border: none;

border-radius: 4px;

background-color: #008cba;

color: white;

font-size: 16px;

cursor: pointer;

margin-top: 10px;

input[type="button"]:hover {

background-color: #005f5f;

 Koneksi
<?php

$koneksi = mysqli_connect('localhost','root', '','mahasiswa');

if (!$koneksi) {

echo "koneksi anda gagal";

}
?>

 Index
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Data Mahasiswa</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h2>Data Mahasiswa</h2>

<br>

<a href="tambah.php">Tambah Data Mahasiswa</a><br><br>

<table>

<tr>

<td>Jenis Kelamin</td>

<td>Prodi</td>
<td>Jurusan</td>

<td>Pilihan</td>

</tr>

<?php

include 'koneksi.php';

$no = 1;

$data = mysqli_query($koneksi,"SELECT * FROM data_mhs");

while($d = mysqli_fetch_array($data)){

<tr>

<td><?php echo $no++; ?></td>

<td><?php echo $d['nama']; ?></td>

<td><?php echo $d['nim']; ?></td>

<td><?php echo $d['umur']; ?></td>

<td><?php echo $d['jenis_kelamin']; ?></td>

<td><?php echo $d['prodi']; ?></td>

<td><?php echo $d['jurusan']; ?></td>

<td><?php echo $d['asal_kota']; ?></td>

<td>

<a href="edit.php?id=<?php echo $d['id'];

?>">Edit</a>

<a href="hapus.php?id=<?php echo $d['id'];

?>">Hapus</a>

</td>

</tr>

<?php

</table>
</body>

</html>

Penjelasan :
Skrip PHP memulai dengan baris include 'koneksi.php';, yang berarti
mengikutkan file bernama koneksi.php yang berisi pengaturan koneksi ke database.
File ini berisi informasi seperti nama database, username, password, dan nama host
yang digunakan untuk menghubungkan ke database. kemudian menampilkan data
mahasiswa dalam bentuk tabel. Data mahasiswa diambil dari database
menggunakan perintah SQL SELECT * FROM data_mhs. Perintah ini mengambil
semua data dari tabel data_mhs dan menampilkan nya dalam bentuk tabel. Tabel
tersebut memiliki 9 kolom, yaitu No, Nama, NIM, Umur, Jenis Kelamin, Prodi,
Jurusan, Asal Kota, dan Pilihan. Pilihan data mahasiswa terdiri dari dua link, yaitu
Edit dan Hapus. Link Edit digunakan untuk mengedit data mahasiswa yang telah
tersimpan, sedangkan link Hapus digunakan untuk menghapus data mahasiswa.
Menggunakan while loop untuk mengulangi proses pengambilan data setiap baris
data dan menampilkannya. Dalam loop tersebut, skrip PHP menggunakan variabel
$d untuk menampung setiap baris data dari database. Kemudian, skrip PHP
menggunakan echo untuk menampilkan setiap kolom data mahasiswa.

 Tambah
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>Tambah Data</title>

<link rel="stylesheet" href="style.css">

</head>

<body>
<h3>Tambah Data Mahasiswa</h3>

<a href="index.php">Kembali</a>

<form method="post" action="proses-tambah.php">

<table>

<tr>

<td><input type="text" name="nama"></td>

</tr>

<tr>

<td><input type="number" name="nim"></td>

</tr>

<tr>

<td><input type="number" name="umur"></td>

</tr>

<tr>

<td>jenis Kelamin</td>

<td><input type="text" name="jenis_kelamin"></td>

</tr>

<tr>

<td>Prodi</td>

<td><input type="text" name="prodi"></td>

</tr>

<tr>

<td>Jurusan</td>

<td><input type="text" name="jurusan"></td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2"><input type="submit"

value="Simpan"></td>

</tr>

</table>

</form>

</body>

</html>

Penjelasan :
Skrip PHP memulai dengan form yang digunakan untuk menambahkan data
mahasiswa. Form tersebut memiliki 7 kolom, yaitu Nama, NIM, Umur, Jenis
Kelamin, Prodi, Jurusan, dan Asal Kota. Pengguna dapat menginputkan data-data
tersebut dalam form tersebut. Kemudian menggunakan table untuk menampilkan
kolom-kolom dalam form tersebut. Kemudian menggunakan tombol "Simpan"
untuk mengirimkan data-data yang telah diinputkan oleh pengguna ke file proses-
tambah.php. Tombol "Simpan" menggunakan metode POST untuk mengirimkan
data-data tersebut. Skrip PHP juga memasukkan link "Kembali" yang digunakan
untuk mengembalikan pengguna ke halaman sebelumnya. Link ini menggunakan
anchor tag dengan atribut href="index.php" yang menunjukkan bahwa pengguna
akan kembali ke halaman index.php.

 Proses Tambah
<?php

include 'koneksi.php';

$nama = $_POST['nama'];

$nim = $_POST['nim'];
$umur = $_POST['umur'];

$jenis_kelamin = $_POST['jenis_kelamin'];

$prodi = $_POST['prodi'];

$jurusan = $_POST['jurusan'];

$asal_kota = $_POST['asal_kota'];

mysqli_query($koneksi,"INSERT INTO data_mhs (nama, nim, umur,

jenis_kelamin, prodi, jurusan, asal_kota) VALUES ('$nama', '$nim',
'$umur', '$jenis_kelamin', '$prodi', '$jurusan', '$asal_kota')");

header("location:index.php");

Penjelasan :
Skrip PHP memulai dengan mengambil data-data yang diinputkan oleh
pengguna melalui form. Data-data tersebut diambil menggunakan superglobal
$_POST yang mengembalikan nilai dari form yang telah dikirimkan. Kemudian
menginputkan data-data yang diambil dari form ke dalam tabel data_mhs
menggunakan perintah SQL INSERT INTO. Perintah ini menginputkan data-data
tersebut ke dalam tabel data_mhs dengan field-field yang sesuai, yaitu nama, nim,
umur, jenis_kelamin, prodi, jurusan, dan asal_kota. Setelah menginputkan data ke
database, skrip PHP menggunakan fungsi header untuk mengarahkan pengguna ke
halaman sebelumnya, yaitu index.php.

 Edit
<!DOCTYPE html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h3>Edit Data Mahasiswa</h3>

<a href="index.php">Kembali</a>

<?php

include 'koneksi.php';

$id = $_GET['id'];

$data = mysqli_query($koneksi,"SELECT * FROM data_mhs WHERE

id='$id'");

while($d = mysqli_fetch_array($data)){

<form method="post" action="proses-edit.php">

<table>

<tr>

<td>

<input type="hidden" name="id" value="<?php

echo $d['id']; ?>">

<input type="text" name="nama" value="<?php

echo $d['nama']; ?>">

</td>

</tr>

<tr>

</tr>

<tr>

<td><input type="number" name="umur"

value="<?php echo $d['umur']; ?>"></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><input type="text" name="jenis_kelamin"

value="<?php echo $d['jenis_kelamin']; ?>"></td>

</tr>

<tr>

<td>Prodi</td>

<td><input type="text" name="prodi" value="<?php

echo $d['prodi']; ?>"></td>

</tr>

<tr>

<td>Jurusan</td>

<td><input type="text" name="jurusan"

value="<?php echo $d['jurusan']; ?>"></td>

</tr>

<tr>

<td><input type="text" name="asal_kota"

value="<?php echo $d['asal_kota']; ?>"></td>

</tr>

<tr>

<td colspan="2"><input type="submit" value="Ubah

Data"></td>

</tr>

</table>
</form>

<?php

</body>

</html>

Penjelasan :
Skrip PHP memulai dengan mengambil data-data dari tabel data_mhs
berdasarkan id yang diinputkan menggunakan perintah SQL SELECT. Perintah ini
mengambil semua data dari tabel data_mhs yang memiliki id yang sesuai dengan id
yang diinputkan. Kemudian menggunakan loop while untuk menampilkan setiap
baris data yang diambil dari database. Dalam setiap loop, skrip ini menampilkan
data-data yang diambil dari database dan menampilkannya dalam form. Skrip PHP
menggunakan form untuk menampilkan data-data yang diambil dari database dan
memungkinkan pengguna untuk mengedit data-data tersebut. Form tersebut
memiliki 7 kolom, yaitu Nama, NIM, Umur, Jenis Kelamin, Prodi, Jurusan, dan
Asal Kota. Pengguna dapat mengedit data-data tersebut dalam form tersebut. Skrip
PHP menggunakan tombol "Ubah Data" untuk mengirimkan data-data yang diedit
oleh pengguna ke file proses-edit.php. Tombol "Ubah Data" menggunakan metode
POST untuk mengirimkan data-data tersebut.

 Proses Edit
<?php

include 'koneksi.php';

$id = $_POST['id'];

$nama = $_POST['nama'];

$nim = $_POST['nim'];
$umur = $_POST['umur'];

$jenis_kelamin = $_POST['jenis_kelamin'];

$prodi = $_POST['prodi'];

$jurusan = $_POST['jurusan'];

$asal_kota = $_POST['asal_kota'];

mysqli_query($koneksi,"UPDATE data_mhs SET nama='$nama', nim='$nim',

umur='$umur', jenis_kelamin='$jenis_kelamin', prodi='$prodi',
jurusan='$jurusan', asal_kota='$asal_kota' WHERE id=$id");

header("location:index.php");

Penjelasan :
Skrip PHP memulai dengan mengambil data-data yang diinputkan oleh
pengguna dari form. Data-data tersebut diambil menggunakan superglobal $_POST
yang mengembalikan nilai dari form yang telah dikirimkan. Data-data yang diambil
tersebut adalah id, nama, nim, umur, jenis_kelamin, prodi, jurusan, dan asal_kota.
Skrip PHP kemudian menggunakan perintah SQL UPDATE untuk mengupdate
data-data yang diinputkan oleh pengguna ke dalam tabel data_mhs. Perintah ini
mengupdate data-data yang sesuai dengan id yang diinputkan, yaitu nama, nim,
umur, jenis_kelamin, prodi, jurusan, dan asal_kota. Setelah mengupdate data-data,
skrip PHP menggunakan fungsi header untuk mengarahkan pengguna ke halaman
sebelumnya, yaitu index.php.

 Hapus
<?php

include 'koneksi.php';

$id = $_GET['id'];
mysqli_query($koneksi, "DELETE FROM data_mhs WHERE id='$id'");

header("Location:index.php");

Penjelasan:
Skrip PHP memulai dengan mengambil data dari URL menggunakan
superglobal $_GET. Data yang diambil adalah id yang diinputkan oleh pengguna
melalui link atau form. Id ini akan digunakan untuk menghapus data-data yang
sesuai dari tabel data_mhs. Kemudian menggunakan perintah SQL DELETE untuk
menghapus data-data yang sesuai dengan id yang diinputkan. Perintah ini
menghapus data-data yang memiliki id yang sama dengan id yang diinputkan oleh
pengguna. Setelah menghapus data-data, skrip PHP menggunakan fungsi header
untuk mengarahkan pengguna ke halaman sebelumnya, yaitu index.php.
4.2 Hasil
BAB V
PENUTUP
5.1 Analisa
HTML Form dan koneksi PHP juga memberikan fleksibilitas dalam
pengelolaan data pengguna. Pengembang dapat mengimplementasikan berbagai
fitur tambahan, seperti autentikasi pengguna, manajemen sesi, atau penanganan
kesalahan dengan mudah menggunakan kombinasi kedua teknologi ini. Dengan
adanya formulir HTML, pengguna dapat memberikan informasi yang diperlukan
untuk proses autentikasi atau pendaftaran, sementara PHP dapat digunakan untuk
memvalidasi dan mengelola data tersebut, serta menyimpannya ke dalam database
dengan aman.

5.2 Kesimpulan
1. HTML form adalah bagian dari halaman web yang memungkinkan
pengguna untuk mengirimkan data ke server.
2. Koneksi database adalah cara bagi program komputer untuk berbicara
dengan database
3. Kita butuh koneksi database karena kadang-kadang kita ingin menyimpan
banyak informasi, seperti nama, usia, atau gambar, dan kita ingin
menyimpannya di tempat yang aman dan mudah diakses.
PENUTUP
1. KESIMPULAN
Kesimpulan menurut saya dari praktikum pemrograman berbasis web,
yaitu memberikan pemahaman praktis tentang bagaimana teknologi jaringan
bekerja dan berinteraksi satu sama lain. Dalam praktikum ini, mempelajari cara
menggunakan HTML untuk menyusun halaman web, CSS untuk
menyempurnakan tata letak, dan JavaScript untuk menambah interaktivitas.
Selain itu, saya juga belajar tentang framework seperti bootstrap atau tailwind.
Di sisi server, penggunaan PHP dalam praktiknya memungkinkan untuk
memahami bagaimana server memproses permintaan klien, mengelola data
dalam database, dan memastikan keamanan dan keandalan aplikasi web.
Integrasi PHP dalam praktikum ini memungkinkan mahasiswa memahami
bagaimana server-side scripting bekerja dalam mengelola data dan interaksi
pengguna. Dengan PHP, mahasiswa dapat membuat aplikasi web yang mampu
menangani proses login, pengelolaan database, dan dinamika konten yang
dipersonalisasi. Praktikum ini menekankan pentingnya keamanan dan sanitasi
input, memastikan bahwa aplikasi web yang dibuat tidak rentan terhadap
serangan dan dapat diandalkan.

2. SARAN
Selama saya mengikuti praktikum hingga akhir praktikum ini saya dapat
mempelajariapa saja yang terdapat di dalam pemrograman berbasis web. Saran
dari saya yaitu, merencanakan kegiatan dengan baik sebelum memulai,
memahami tujuan dari praktikum ini dari awal hingga akhir. Memberikan
perspektif baru dalam proses belajar mengajar.
Berkolaborasi dengan teman sekelas melalui diskusi dapat memberikan
sudut pandang baru dan mempercepat pembelajaran. Selain itu, bereksperimen
dengan kode dan mencoba hal baru juga penting untuk memperdalam
pemahaman Anda. Mendokumentasikan konsep penting, kesalahan dan solusi
yang ditemukan juga sangat berguna. Memahami dasar-dasar HTML, CSS,
JavaScript, dan PHP sebelum mempelajari kerangka kerja atau pustaka yang
lebih kompleks membuat pembelajaran menjadi lebih mudah. Siswa juga
harus. Penting juga untuk selalu mengikuti perkembangan teknologi terkini dan
mendapatkan informasi tentang teknologi baru yang sedang tren. Terakhir,
meminta masukan kepada dosen atau mentor dapat memberikan wawasan
konstruktif untuk meningkatkan keterampilan dan pemahaman.
BIOGRAFI PENYUSUN

Nama : Sunda Madu Buana

TTL : Jayapura, 17 April 2005

Alamat : Desa Bilaporah Timur, senggaan, Kec. Socah, Kab. Bangkalan

Jurusan : Sistem Informasi

Universitas : Universitas Trunojoyo Madura

Hobi : Berenang, Dance, Nonton anime

Cita-cita : Pramugari

HP : 082199048001

e-Mail : [email protected]

RIWAYAT PENDIDIKAN
1. SD Nurul Huda 1 Yapis Jayapura (2011-2017)
2. SMP Negeri 3 Cilimus (2017-2020)
3. SMK Negeri 2 Bangkalan (2022-2023)
4. Universitas Trunojoyo Madura (2023-Sekarang)

Anda mungkin juga menyukai

Laporan Praktikum Pemrograman Web 2023
Belum ada peringkat
Laporan Praktikum Pemrograman Web 2023
19 halaman
Laporan Praktikum Pemograman Web
Belum ada peringkat
Laporan Praktikum Pemograman Web
20 halaman
Pemrograman WEB
Belum ada peringkat
Pemrograman WEB
5 halaman
Modul Prak Web I Dina Pert 2
Belum ada peringkat
Modul Prak Web I Dina Pert 2
27 halaman
Materi 2 - HTML
Belum ada peringkat
Materi 2 - HTML
9 halaman
Makalah Dasar Pemrograman Web Dengan HTML
Belum ada peringkat
Makalah Dasar Pemrograman Web Dengan HTML
15 halaman
LKPD 1 Web Dasar
Belum ada peringkat
LKPD 1 Web Dasar
16 halaman
Laporan6 A1g021015 Jesicha Anastasia
Belum ada peringkat
Laporan6 A1g021015 Jesicha Anastasia
18 halaman
Modul Web Programming I - Esty Purwaningsih - 2
100% (1)
Modul Web Programming I - Esty Purwaningsih - 2
47 halaman
Laporan Praktikum 3 Sistem Informasi Manajemen
Belum ada peringkat
Laporan Praktikum 3 Sistem Informasi Manajemen
14 halaman
Renanda Anwar Pratama Siregar - Laporan2
Belum ada peringkat
Renanda Anwar Pratama Siregar - Laporan2
6 halaman
LAPORAN PRAKTIKUM Ke 1 PEMROGRAMAN WEB
Belum ada peringkat
LAPORAN PRAKTIKUM Ke 1 PEMROGRAMAN WEB
19 halaman
Modul Web Kelas XL - RPL
Belum ada peringkat
Modul Web Kelas XL - RPL
50 halaman
Makalah Designt Website
Belum ada peringkat
Makalah Designt Website
17 halaman
Laporan Materi 1
Belum ada peringkat
Laporan Materi 1
7 halaman
(Revisi) Yosa
Belum ada peringkat
(Revisi) Yosa
56 halaman
TG3 22753078 Pmi1217
Belum ada peringkat
TG3 22753078 Pmi1217
13 halaman
Modul 01 - HTML
Belum ada peringkat
Modul 01 - HTML
23 halaman
Dokumen (1) - WPS Office
Belum ada peringkat
Dokumen (1) - WPS Office
25 halaman
Ebook Pembelajaran HTML Lengkap
Belum ada peringkat
Ebook Pembelajaran HTML Lengkap
8 halaman
Laporan Praktikum Pemrograman WEB MODUL I
Belum ada peringkat
Laporan Praktikum Pemrograman WEB MODUL I
8 halaman
Dasar-Dasar HTML untuk Pemula
Belum ada peringkat
Dasar-Dasar HTML untuk Pemula
8 halaman
(REVISI) Usamah Putra Firdaus - 21533416
Belum ada peringkat
(REVISI) Usamah Putra Firdaus - 21533416
71 halaman
Laporan Praktikum Pemrograman Web 2023
Belum ada peringkat
Laporan Praktikum Pemrograman Web 2023
19 halaman
Modul Aplikasi Berbasis Web - HTML
Belum ada peringkat
Modul Aplikasi Berbasis Web - HTML
29 halaman
Coding Anadia
Belum ada peringkat
Coding Anadia
7 halaman
HTML - Ricky Septiandy v2
Belum ada peringkat
HTML - Ricky Septiandy v2
47 halaman
Belajar Dasar HTML untuk Pemula
Belum ada peringkat
Belajar Dasar HTML untuk Pemula
58 halaman
Modul Desain Website
Belum ada peringkat
Modul Desain Website
98 halaman
Modul 6
Belum ada peringkat
Modul 6
8 halaman
Web Programming I Ela Nurelasari
Belum ada peringkat
Web Programming I Ela Nurelasari
43 halaman
Modul Praktikum Pemrograman Web I
Belum ada peringkat
Modul Praktikum Pemrograman Web I
81 halaman
Modul 1 - Web Client
Belum ada peringkat
Modul 1 - Web Client
6 halaman
Laporan Membuat Website
Belum ada peringkat
Laporan Membuat Website
48 halaman
Pemrograman Web Dan Perangkat Bergerak
Belum ada peringkat
Pemrograman Web Dan Perangkat Bergerak
23 halaman
Belajar Dasar Pemrograman Web HTML
Belum ada peringkat
Belajar Dasar Pemrograman Web HTML
29 halaman
Fani Pebrianto - 2115061061 - TI B - Laprak 1 HTML5
Belum ada peringkat
Fani Pebrianto - 2115061061 - TI B - Laprak 1 HTML5
50 halaman
Panduan Dasar Pemrograman HTML
Belum ada peringkat
Panduan Dasar Pemrograman HTML
22 halaman
Laprak Pemrograman Web1 Haidar
Belum ada peringkat
Laprak Pemrograman Web1 Haidar
8 halaman
Dasar HTML untuk Mahasiswa
Belum ada peringkat
Dasar HTML untuk Mahasiswa
5 halaman
MODUL Pemrograman Web
Belum ada peringkat
MODUL Pemrograman Web
86 halaman
HTML untuk Mahasiswa Akuntansi
Belum ada peringkat
HTML untuk Mahasiswa Akuntansi
12 halaman
Tag Dasar HTML PDF
Belum ada peringkat
Tag Dasar HTML PDF
8 halaman
Modul Pemrograman Web I RPL
Belum ada peringkat
Modul Pemrograman Web I RPL
89 halaman
TEMPLATE LAPORAN Coding
Belum ada peringkat
TEMPLATE LAPORAN Coding
14 halaman
Irwan Dwi Satria B1a022338
Belum ada peringkat
Irwan Dwi Satria B1a022338
9 halaman
Hafidz Thufail - Laprak PWC P1
Belum ada peringkat
Hafidz Thufail - Laprak PWC P1
8 halaman
Makalah Tes Tutor - Syiffa Putri Meillani
Belum ada peringkat
Makalah Tes Tutor - Syiffa Putri Meillani
23 halaman
Ba30bukuajarpemrogramanweb1isbn978 623 8417-47-6pdfterbitoktober2023 25 45
Belum ada peringkat
Ba30bukuajarpemrogramanweb1isbn978 623 8417-47-6pdfterbitoktober2023 25 45
21 halaman
Teknologi Informasi
Belum ada peringkat
Teknologi Informasi
22 halaman
LKPD HTML Dasar - M1-3R
Belum ada peringkat
LKPD HTML Dasar - M1-3R
17 halaman
Pemrograman Web Berbasis HTML
Belum ada peringkat
Pemrograman Web Berbasis HTML
25 halaman
Web Programming Tentang HTML
Belum ada peringkat
Web Programming Tentang HTML
13 halaman
Modul HTML Dasar
Belum ada peringkat
Modul HTML Dasar
13 halaman
Prak PWC
Belum ada peringkat
Prak PWC
74 halaman
Modul 1 Pengantar Data Science Dasar Dasar Data Sains
100% (1)
Modul 1 Pengantar Data Science Dasar Dasar Data Sains
37 halaman
Modul Praktikum Desain Web
Belum ada peringkat
Modul Praktikum Desain Web
47 halaman