LATIHAN PRAKTIK

UJI KOMPETENSI KEAHLIAN 2021/2022

Pengenalan HTML
HTML (Hypertext Markup Language) adalah bahasa standar yang digunakan pada halaman web. Protokol
yang digunakan dalam komunikasi antara web server dan web browser adalah HTTP. Dokumen HTML adalah
file yang diakhiri dengan ekstensi .html atau .htm. Versi terbaru dari HTML adalah HTML 5.

Pengenalan Bootstrap
Bootstrap merupakan salah satu framework dari CSS untuk mempermudah proses pembuatan aplikasi berbasis
web atau website.

Pada ujikom nanti, kalian bisa menyiapkan template sesuai keinginan kalian (bisa mengunduh atau kalian
membuat sendiri CSS-nya). Namun, untuk latihan kali ini kita akan menggunakan template sederhana dari
Bootstrap. Nama file-nya ialah bootstrap-admin-template.
1. Nyalakan aplikasi XAMPP
2. Buka direktori C://xampp/htdocs
3. Buat folder baru bernama pengayaan_ujikom kemudian paste file bootstrap-admin-template.rar di
dalam folder tersebut.

4. Kemudian, klik kanan file tersebut dan pilih Extract Here..

5. Jika berhasil maka akan muncul file-file hasil ekstraksinya.

6. Untuk mengaksesnya, akses lewat browser Google Chrome dengan cara menuliskan alamat berikut
ini (coba satu-satu) :
a. localhost/pengayaan_ujikom
b. localhost:81/pengayaan_ujikom
c. 127.0.0.1/pengayaan_ujikom
d. 127.0.0.1:81/pengayaan_ujikom

1
 7. Maka akan muncul halaman seperti ini :

8. Cobalah buka satu per-satu untuk melihat tampilannya

Membuat tampilan login

Login adalah halaman yang akan dieksekusi pertama kali. Perhatikan file signin.html berikut ini :

Tampilan tersebut akan kita edit menjadi kurang lebih sesuai dengan rancangan MockUp kita sebelumnya.
Berikut langkah-langkah yang bisa kita lakukan:
1. Bukalah file signin.html pada folder pengayaan_ujikom yang berada di C://xampp/htdocs
menggunakan aplikasi Sublime Text ataupun Notepad++ (Pada contoh ini saya menggunakan
Notepad++ karena lebih ringan untuk dijalankan di PC dengan spesifikasi standard).
Maka akan tampil seperti berikut ini :

2
2. Setelah itu, pada keyboard kita tekan Ctrl+A kemudian klik kanan dan pilih Copy

3. Lalu buatlah file baru di menu File > New

4. Paste-lah di dalam file baru tersebut kodingan yang tadi dengan cara klik kanan > pilih Paste

5. Kemudian simpanlah file baru tersebut dengan nama index.php di dalam folder pengayaan_ujikom.
Jika berhasil disimpan maka teks akan berubah warna.

3
 6. Untuk mengeceknya, kita buka kembali aplikasi Google Chrome kemudian akseslah localhost
pengayaan_ujikom, jika berhasil maka halaman yang pertama kali dibuka adalah halaman index.php
yang telah berisi tampilan login.

Mengedit tampilan index.php

1. Mengubah Title/Judul Halaman
- Bukalah kembali aplikasi Notepad++ yang berisi file index.php
- Carilah baris kode yang mengandung kata <title>

- Gantilah teks berwarna hitam menjadi “Halaman Login”

4
 - Tekan Ctrl+S pada keyboard atau klik File>Save
- Bukalah Google Chrome kembali dan refresh halaman localhost/pengayaan_ujikom. Maka
judulnya akan berubah :

2. Mengubah isi tulisan Please Sign In

- Bukalah kembali aplikasi Notepad++ yang berisi file index.php
- Carilah baris kode yang mengandung kata Please sign in

- Ubahlah teks tersebut menjadi Silakan Login

- Jangan lupa di Save

- Cobalah cek kembali di Google Chrome anda, refresh, jika berhasil maka tulisannya akan berubah.

3. Merubah inputan
Pada rancangan aplikasi, inputan menggunakan NIK sebagai username dan Nama Lengkap sebagai
password. Oleh karena itu kita akan merubah tampilan inputan yang ada.
- Bukalah kembali aplikasi Notepad++ yang berisi file index.php
- Carilah baris kode yang mengandung kata Email address

5
 - Ubahlah baris tersebut menjadi berikut ini :
<label for="inputNIK" class="sr-only">NIK</label>
<input type="text" id="inputNIK" class="form-control" placeholder="NIK" required autofocus>
- Ubah juga baris kode untuk password menjadi seperti ini :
<label for="inputNama" class="sr-only">Nama</label>
<input type="password" id="inputNama" class="form-control" placeholder="Nama Lengkap"
required>
- Sehingga barisnya menjadi seperti ini :

- Simpan pengerjaan
- Cobalah cek kembali di Google Chrome, refresh, jika berhasil maka inputannya akan berubah.

4. Merubah tombol
Pada rancangan MockUp, terdapat dua tombol Masuk dan Saya Pengguna Baru. Oleh karena itu kita
akan merubah tulisan pada tampilan.
- Carilah baris berikut :

- Kemudian kita ubah menjadi seperti ini :

- Simpan
- Cek lagi pada Google Chrome maka tampilannya akan berubah :

6
5. Merubah logo
Untuk logo, kalian bisa buat sendiri sesuai dengan aplikasi yang kalian buat. Untuk ujikom nanti
setiap orang harus mempunyai logo yang berbeda!
Pada latihan kali ini kita akan menggunakan logo sekolah yang sudah di sharing di server. Kita copy-
kan file gambar tersebut ke dalam folder htdocs kita.

- Buka kembali file index.php yang ada di aplikasi Notepad++

- Carilah baris berikut :

- Ubahlah bagian src menjadi nama file logo sehingga menjadi seperti berikut ini :

- Simpan kemudian cek di Google Chrome

6. Merubah warna background

- Untuk merubah warna background index.php cobalah cari baris kode yang ada tag <style> seperti
berikut ini :

7
- Pada tag <style> tersebut tambahkan beberapa baris kode seperti ini :

- Coba cek di Google Chrome maka tampilan akan berubah :

8
- Untuk merubah warnanya, perhatikan kode berikut ini pada index.php :

Perhatikan kode yang ada tanda pagarnya (#)! Itu adalah kode warna berbahasa heksadesimal atau
dalam bahasa inggris disebut Color Hex. Untuk mencari tahu tentang kode color hex yang kita
inginkan adalah dengan 2 cara :
a. Online : searching pada google.com dengan kata kunci color picker

b. Offline : menggunakan aplikasi Color Cop yang telah dishare di server.

Setelah itu kita tinggal pilih warna kemudian copy kode HEX ke baris kode yang tadi. Sebagai
contoh kita akan memilih warna pink muda dan pink tua. Pink muda mempunyai kode HEX
#ffd6e4 dan pink tua mempunyai kode #db678f. Setelah itu kita terapkan pada baris berikut di
index.php :

Maka tampilannya akan menjadi :

9
Setelah Anda berhasil membuat file index.php cobalah buat tampilan file registrasi.php. Isi baris kode-nya
tinggal copy dari index.php kemudian diubah :
- Title : Halaman Registrasi
- Judul Isi : Silakan Registrasi
- Format inputan :
a. NIK
b. Nama Lengkap
c. Tempat Lahir
d. Tanggal Lahir
e. Alamat
Kurang lebih menjadi seperti ini (lebih bagus lebih baik) :

Jika sudah selesai, lanjut mendesain halaman dashboard (tutorial menyusul)

10