LAPORAN TUGAS UJIAN AKHIR SEMESTER

TOOL TEKNOLOGI INFORMASI

DOSEN PENGAMPU
Anak Agung Ketut Agung Cahyawan Wiranatha, S.T., M.T.

DISUSUN OLEH
I Made Yohan Dwi Pramana (2305551097)

MATA KULIAH
Tool Teknologi Informasi

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2023
 DAFTAR ISI

DAFTAR ISI ......................................................................................................... ii

BAB I PEMBAHASAN MATERI ....................................................................... 4

1.1 HTML, CSS, PHP, JavaScript................................................................... 4

1.1.1 HTML ................................................................................................ 4

1.1.2 CSS .................................................................................................... 4

1.1.3 PHP .................................................................................................... 4

1.1.4 JavaScript ........................................................................................... 4

1.2 CRUD ....................................................................................................... 5

1.2.1 Create ................................................................................................. 5

1.2.2 Retrieve .............................................................................................. 5

1.2.3 Update ................................................................................................ 5

1.2.4 Delete ................................................................................................. 5

BAB II TAMPILAN WEB DAN SOURCE CODE ................................. 7

2.1 Database .................................................................................................... 7

2.1.1 Pembuatan Database .......................................................................... 7

2.1.2 Mengkoneksikan Database dengan Situs Web................................... 8

2.2 Halaman Utama (indeks.php) ................................................................... 9

2.2.1 Source Code Penghapusan Data dan Pengambilan Data ................... 9

2.2.2 Source Code Tampilan Web dan Tabel ............................................ 10

2.3 Halaman Pendaftaran Peserta (create.php) ............................................. 12

2.3.1 Source Code Penyimpanan Data ke Database ................................. 13

2.3.2 Source Code Tampilan Web dan Form ............................................ 14

2.4 Halaman Update Data Peserta ................................................................ 15

ii
 2.4.1 Source Code Update Data Peserta ................................................... 16

2.4.2 Source Code Tampilan Web dan Form ............................................ 17

2.5 Styles.css ................................................................................................. 19

2.6 Script.js ................................................................................................... 20

BAB III UPLOAD GIT .......................................................................... 22

3.1 Buat Repositori di Github ....................................................................... 22

3.2 Inisialisasi Git ......................................................................................... 22

3.3 Membuat Commit ke Repositori Git....................................................... 23

3.4 Menambahakan Repositori Jarak Jauh.................................................... 23

3.5 Github ..................................................................................................... 24

iii
 BAB I
PEMBAHASAN MATERI
1.1 HTML, CSS, PHP, JavaScript
1.1.1 HTML
HTML, singkatan dari Hypertext Markup Language, adalah sebuah bahasa
markah standar yang digunakan untuk membuat dan merancang halaman web.
HTML memberikan struktur dasar untuk konten di dalam sebuah halaman web,
seperti teks, gambar, tautan, formulir, dan elemen-elemen lainnya. Dengan HTML,
pengembang web dapat menentukan bagaimana halaman web akan ditampilkan dan
diatur. HTML juga dapat menggabungkan dengan CSS (Cascading Style Sheets)
untuk mengatur tata letak, gaya, dan tampilan halaman web. Selain itu, JavaScript
sering digunakan bersama HTML untuk memberikan interaktivitas pada halaman
web.

1.1.2 CSS
CSS, atau Cascading Style Sheets, adalah bahasa gaya yang digunakan
untuk mengontrol presentasi dan tata letak dari halaman web yang ditulis dengan
menggunakan HTML atau XHTML. Dengan menggunakan CSS, pengembang web
dapat memisahkan struktur dan konten dari desain visual, sehingga memungkinkan
pengelolaan dan pembaruan desain lebih efisien.

1.1.3 PHP
PHP, singkatan dari "Hypertext Preprocessor," adalah bahasa
pemrograman server-side yang dirancang untuk pengembangan web. PHP banyak
digunakan untuk membuat halaman web dinamis dengan kemampuan berinteraksi
dengan database dan menghasilkan konten yang dapat berubah sesuai dengan
permintaan pengguna.

1.1.4 JavaScript
JavaScript adalah bahasa pemrograman tingkat tinggi yang bersifat
dinamis dan dapat dijalankan di sisi klien (client-side) pada browser web. Fungsi

4
utama JavaScript adalah memberikan interaktivitas pada halaman web,
memungkinkan pengguna untuk berinteraksi dengan elemen-elemen halaman,
merespons peristiwa (event), dan mengubah konten halaman secara dinamis tanpa
perlu me-refresh halaman.

1.2 CRUD
CRUD adalah kependekan dari Create, Read, Update, dan Delete, yang
merupakan operasi fundamental yang diterapkan pada sistem manajemen basis data
(DBMS) atau aplikasi web untuk mengatur data. Ini mencakup pembuatan data baru
(Create), pengambilan data (Retrieve), pembaruan data yang sudah ada (Update),
dan penghapusan data (Delete). Keempat operasi ini membentuk dasar pengelolaan
data dalam konteks pengembangan perangkat lunak.
1.2.1 Create
Proses ini terkait dengan pembuatan data baru dan inklusi data tersebut ke
dalam basis data. Sebagai contoh, dalam aplikasi web, situasinya mungkin terjadi
pada formulir pendaftaran, di mana pengguna dapat memasukan data baru dengan
mengisi informasi yang diperlukan.

1.2.2 Retrieve
Operasi ini melibatkan pengambilan atau pencarian data dari basis data
atau sistem. Umumnya diimplementasikan menggunakan perintah SQL SELECT
atau metode-metode pencarian dalam aplikasi.

1.2.3 Update
Operasi ini digunakan untuk memperbarui data yang sudah ada di dalam
basis data atau sistem. Umumnya diimplementasikan menggunakan perintah SQL
UPDATE atau fungsi-fungsi serupa dalam aplikasi.

1.2.4 Delete
Operasi ini digunakan untuk menghapus data dari basis data atau sistem.

5
 Diimplementasikan menggunakan perintah SQL DELETE atau fungsi-
fungsi serupa dalam aplikasi.

6
 BAB II
TAMPILAN WEB DAN SOURCE CODE
Pada laporan ini, saya telah berhasil membuat situs web Daftar Peserta
Lomba Balap Karung Pelajar Nasional dengan menggunakan sejumlah bahasa
pemrograman, termasuk JavaScript, CSS, PHP, dan HTML. Melalui integrasi
ketiga bahasa ini, kami berhasil menciptakan situs web yang tidak hanya menarik
secara visual dan dinamis, tetapi juga menyajikan data secara efektif. Berikut ini,
saya akan memperlihatkan beberapa source code dan fungsionalitas utama dari
program tersebut.
2.1 Database

Gambar diatas merupakan tampilan dari database pada phpMyAdmin,

Dimana database tersebut memiliki koneksi dengan halaman web yang sudah
dibuat. Jika user menginput data pada halaman web maka langsung masuk pada
database phpMyAdmin.
2.1.1 Pembuatan Database
CREATE DATABASE crud;
USE crud;

CREATE TABLE `peserta` (

`id_peserta` int(11) NOT NULL,
`nama_peserta` varchar(50) NOT NULL,
`sekolah` varchar(50) NOT NULL,
`alamat` varchar(100) NOT NULL,
`tanggal_lahir` date NOT NULL,
`no_telepon` varchar(13) NOT NULL,
`jenis_kelamin` enum('L','P') NOT NULL
)

7
 INSERT INTO `peserta` (`id_peserta`, `nama_peserta`, `sekolah`,
`alamat`, `tanggal_lahir`, `no_telepon`, `jenis_kelamin`) VALUES
(4, 'Abdul', 'SMA N 1 Tangerang', 'Tangerang, Jakarta', '2006-
04-25', '087999777666', 'L'),
(5, 'Sinta', 'SMA N 1 Malang', 'Malang, Jawa Timur', '2006-04-
25', '088765434212', 'P'),
(6, 'Fajar', 'SMA N1 BLAHBATUH', 'Sukawati, Gianyar', '2005-03-
22', '09827645627', 'L');

Semua perintah di atas memiliki tujuan untuk membuat struktur basis data
dan tabel, serta menyisipkan data awal untuk tabel peserta. Pastikan untuk
menjalankan perintah-perintah ini pada sistem manajemen basis data (misalnya,
MySQL) yang sesuai dan bahwa struktur dan data sesuai dengan kebutuhan aplikasi
Anda.

2.1.2 Mengkoneksikan Database dengan Situs Web

<?php

$host="localhost";
$user="root";
$pass="";
$db="crud";

$kon=mysqli_connect($host, $user, $pass, $db);

if (!$kon){
die("koneksi gagal :".mysqli_connect_error());

?>

Dengan menggunakan script ini, Anda menciptakan koneksi ke basis data

MySQL menggunakan PHP. Pastikan bahwa informasi koneksi (host, nama
pengguna, kata sandi, dan nama basis data) sesuai dengan konfigurasi server
MySQL Anda. Selain itu, gunakan teknik keamanan seperti prepared statements
untuk mencegah serangan SQL injection.

8
2.2 Halaman Utama (indeks.php)

Gambar yang ditampilkan di atas adalah tampilan halaman utama situs

web pada layar desktop. Pada halaman utama ini, memuat kolom pencarian data
peserta lomba dan tabel yang memuat data peserta lomba balap karung. Pada
tampilan tersebut pengguna juga dapat menghapus data peserta dengan menekan
tombol ‘Delete’, selain itu pengguna juga bisa memasukan data baru dengan
menekan tombol ‘Daftar Sekarang’ dan pengguna akan dibawa ke halaman Create.
Serta bisa mengedit data dengan menekan tombol ‘Update’ lalu pengguna akan
dibawa ke halaman Update. Berikut ini adalah code yang digunakan dalam
pembuatan web tersebut.
2.2.1 Source Code Penghapusan Data dan Pengambilan Data
<?php
include "koneksi.php";

// Menghapus data jika ada parameter id_peserta yang dikirimkan

if (isset($_GET['id_peserta'])) {
$id_peserta = htmlspecialchars($_GET["id_peserta"]);
$sql = "DELETE FROM peserta WHERE id_peserta =
'$id_peserta'";
$hasil = mysqli_query($kon, $sql);

if (!$hasil) {
echo "<div class='alert alert-danger'> Data Gagal
dihapus: " . mysqli_error($kon) . "</div>";
}
}

// Mencari data sesuai dengan parameter pencarian (jika ada)

if (isset($_GET['cari'])) {
$pencarian = mysqli_real_escape_string($kon, $_GET['cari']);

9
 $query = "SELECT * FROM peserta WHERE
nama_peserta LIKE '%$pencarian%' OR
sekolah LIKE '%$pencarian%' OR
alamat LIKE '%$pencarian%'";
} else {
$query = "SELECT * FROM peserta";
}

$hasil = mysqli_query($kon, $query);

?>

Ini adalah potongan kode yang dapat digunakan untuk mengelola data
peserta, termasuk penghapusan dan pencarian, dalam suatu aplikasi berbasis web.
Pastikan bahwa koneksi ke basis data ($kon) sudah dikonfigurasi dan berfungsi
dengan benar.

2.2.2 Source Code Tampilan Web dan Tabel

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn
" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@4
00;700&display=swap" rel="stylesheet">
<title>BALAP KARUNG NATIONAL CUP</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">
<img src="logobalapkarung.png" alt="Logo"
class="navbar-logo mr-2">
BALAP KARUNG PELAJAR NATIONAL CUP I
</span>
</nav>
<div class="container">
<br>
<img src="logobalapkarung.png" class="mx-auto d-block"
style="width: 150px;">

<h4 class=mt-3><center>DAFTAR PESERTA LOMBA BALAP KARUNG

PELAJAR NASIONAL</center></h4>

<form method="GET" action="index.php" class="form-

inline">
<label class="mr-2">Pencarian:</label>

10
 <input type="text" name="cari" class="form-control"
value="<?php echo isset($_GET['cari']) ?
htmlspecialchars($_GET['cari']) : ''; ?>">
<button type="submit" class="btn btn-primary">Cari</button>
</form>

<table class="my-3 table table-bordered">

<thead>
<tr class="table-primary">
<th>No</th>
<th>Nama</th>
<th>Sekolah</th>
<th>Tanggal Lahir</th>
<th>Jenis Kelamin</th>
<th>No Telepon</th>
<th>Alamat</th>
<th colspan='2'>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
while ($data = mysqli_fetch_array($hasil)) {
$no++;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data["nama_peserta"];
?></td>
<td><?php echo $data["sekolah"];
?></td>
<td><?php echo $data["tanggal_lahir"];
?></td>
<td><?php echo $data["jenis_kelamin"];
?></td>
<td><?php echo $data["no_telepon"];
?></td>
<td><?php echo $data["alamat"];
?></td>
<td>
<a href="update.php?id_peserta=<?php
echo htmlspecialchars($data['id_peserta']); ?>" class="btn btn-
warning" role="button">Update</a>
<a href="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>?id_peserta=<?php echo
$data['id_peserta']; ?>" class="btn btn-danger"
role="button">Delete</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<a href="create.php" class="btn btn-primary"
role="button">Daftar Sekarang</a>

11
 </div>
</body>
</html>

Source Code ini digunakan untuk menampilkan daftar peserta dan

memberikan opsi untuk mencari, mengupdate, dan menghapus data peserta.
Pastikan file ini dihubungkan dengan file koneksi.php dan sesuai dengan struktur
tabel yang ada di basis data. Selain itu, pastikan untuk mengimplementasikan
langkah-langkah keamanan, seperti menggunakan prepared statements, untuk
mencegah serangan SQL injection.

2.3 Halaman Pendaftaran Peserta (create.php)

Gambar yang ditampilkan di atas adalah tampilan halaman Pendaftaran

Peserta pada situs web pada layar desktop. Setelah menekan tombol ‘Daftar
Sekarang’ pada halaman utama pengguna akan diarahkan ke halaman ini. Pada
halaman ini, memuat form yang harus diisi dengan data diri peserta lomba yang
hendak mendaftar. Setelah mengisi form, jika pengguna menekan ‘Submit’ maka
data yang sudah diisi pada form akan dimasukan ke Database lalu ditampilkan pada
tabel di haaman utama. Jika pengguna menekan ‘Kembali’ maka data yang sudah
diisi ke form tidak akan disimpan ke database dan juga tidak ditampilkan pada tabel
di halaman utama.

12
2.3.1 Source Code Penyimpanan Data ke Database
<?php
//Include file koneksi, untuk koneksikan ke database
include "koneksi.php";

//Fungsi untuk mencegah inputan karakter yang tidak sesuai

function input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//Cek apakah ada kiriman form dari method post
if ($_SERVER["REQUEST_METHOD"] == "POST") {

$nama_peserta=input($_POST["nama_peserta"]);
$sekolah=input($_POST["sekolah"]);
$tanggal_lahir = date('Y-m-d',
strtotime(input($_POST["tanggal_lahir"])));
$jenis_kelamin=input($_POST["jenis_kelamin"]);
$no_telepon=input($_POST["no_telepon"]);
$alamat=input($_POST["alamat"]);

//Query input menginput data kedalam tabel anggota

$sql="insert into peserta
(nama_peserta,sekolah,tanggal_lahir,jenis_kelamin,no_telepon,ala
mat) values

('$nama_peserta','$sekolah','$tanggal_lahir','$jenis_kelam
in','$no_telepon','$alamat')";

//Mengeksekusi/menjalankan query diatas

$hasil=mysqli_query($kon,$sql);

//Kondisi apakah berhasil atau tidak dalam mengeksekusi

query diatas
if ($hasil) {
header("Location:index.php");
}
else {
echo "<div class='alert alert-danger'> Data Gagal
disimpan.</div>";

}
?>

Script PHP di atas bertanggung jawab untuk menangani proses penerimaan

dan penyimpanan data peserta yang dikirimkan melalui formulir input pada
halaman create.php. Script ini digunakan untuk menangani penambahan data
peserta ke dalam database ketika formulir diisi pada halaman create.php.

13
2.3.2 Source Code Tampilan Web dan Form
<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran Peserta</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn
" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@4
00;700&display=swap" rel="stylesheet">

<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">
<img src="logobalapkarung.png" alt="Logo" class="navbar-
logo mr-2">
BALAP KARUNG PELAJAR NATIONAL CUP I</span>
</nav>
<div class="container">

<h4>Pendaftaran Peserta</h4>

<form name="registrationForm" action="<?php echo

$_SERVER["PHP_SELF"];?>" method="post" onsubmit="return
validateForm()">
<div class="form-group">
<label>Nama:</label>
<input type="text" name="nama_peserta" class="form-
control" placeholder="Masukan Nama" required />

</div>
<div class="form-group">
<label>Sekolah:</label>
<input type="text" name="sekolah" class="form-
control" placeholder="Masukan Nama Sekolah" required/>
</div>
<div class="form-group">
<label>Tanggal Lahir:</label>
<input type="text" name="tanggal_lahir" class="form-control"
placeholder="YYYY-MM-DD" required/>
</div>

<div class="form-group">
<label>Jenis Kelamin:</label>
<select name="jenis_kelamin" class="form-control" required>
<option value="L">Laki-laki</option>

14
 <option value="P">Perempuan</option>
</select>
</div>

</p>
<div class="form-group">
<label>No telepon:</label>
<input type="text" name="no_telepon" class="form-
control" placeholder="Masukan No telepon" required/>
</div>
<div class="form-group">
<label>Alamat:</label>
<textarea name="alamat" class="form-control"
rows="5"placeholder="Masukan Alamat" required></textarea>
</div>

<button type="submit" name="submit" class="btn btn-

primary">Submit</button>
<a href="index.php" class="btn btn-secondary"
role="button">Kembali</a>
</form>
</div>
</body>
</html>

Source Code ini digunakan untuk menerima informasi pendaftaran peserta

melalui formulir dan mengirimkannya ke database. Selain itu Source Code ini
mengatur tampilan web mulai dari title hingga form yang ada pada halaman
tersebut.

2.4 Halaman Update Data Peserta

15
 Gambar yang ditampilkan di atas adalah tampilan halaman Update Data
Peserta pada situs web pada layar desktop. Setelah menekan tombol ‘Update’ pada
tabel aksi di halaman utama pengguna akan diarahkan ke halaman ini. Pada
halaman ini, memuat form yang sudah berisi data diri peserta yang sudah terdaftar
sebelumnya. Lalu pengguna dapat mengubah data tersebut sesuai dengan
keinginan. Jika pengguna menekan ‘Submit’ maka data diri peserta yang ada di
database akan ikut berubah dan data diri yang ditampilkan pada halaman utama juga
berubah. Jika pengguna menekan ‘Kembali’ maka data yang sudah diedit tidak akan
disimpan ke database dan juga tidak ditampilkan pada tabel di halaman utama.
2.4.1 Source Code Update Data Peserta
<?php

//Include file koneksi, untuk koneksikan ke database

include "koneksi.php";

//Fungsi untuk mencegah inputan karakter yang tidak sesuai

function input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//Cek apakah ada nilai yang dikirim menggunakan methos GET
dengan nama id_peserta
if (isset($_GET['id_peserta'])) {
$id_peserta=input($_GET["id_peserta"]);

$sql="select * from peserta where

id_peserta=$id_peserta";
$hasil=mysqli_query($kon,$sql);
$data = mysqli_fetch_assoc($hasil);

//Cek apakah ada kiriman form dari method post

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$id_peserta=htmlspecialchars($_POST["id_peserta"]);
$nama_peserta=input($_POST["nama_peserta"]);
$sekolah=input($_POST["sekolah"]);
$tanggal_lahir = date('Y-m-d',
strtotime(input($_POST["tanggal_lahir"])));
$jenis_kelamin=input($_POST["jenis_kelamin"]);
$no_telepon=input($_POST["no_telepon"]);
$alamat=input($_POST["alamat"]);

//Query update data pada tabel anggota

16
 $sql="update peserta set
nama_peserta='$nama_peserta',
sekolah='$sekolah',
tanggal_lahir='$tanggal_lahir',
jenis_kelamin='$jenis_kelamin',
no_telepon='$no_telepon',
alamat='$alamat'
where id_peserta=$id_peserta";

//Mengeksekusi atau menjalankan query diatas

$hasil=mysqli_query($kon,$sql);

//Kondisi apakah berhasil atau tidak dalam mengeksekusi

query diatas
if ($hasil) {
header("Location:index.php");
}
else {
echo "<div class='alert alert-danger'> Data Gagal
disimpan.</div>";

?>

Bagian ini menangani pengiriman formulir dengan metode POST. Data

dari formulir diambil dan digunakan dalam query SQL untuk melakukan update
pada data peserta di database.

2.4.2 Source Code Tampilan Web dan Form

<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran Anggota</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn
" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@4
00;700&display=swap" rel="stylesheet">

<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">

17
 <img src="logobalapkarung.png" alt="Logo" class="navbar-
logo mr-2">
BALAP KARUNG PELAJAR NATIONAL CUP I</span>
</nav>
<div class="container">

<h4>Update Data Peserta</h4>

<form name="registrationForm" action="<?php echo

$_SERVER["PHP_SELF"];?>" method="post" onsubmit="return
validateForm()">
<div class="form-group">
<label>Nama:</label>
<input type="text" name="nama_peserta" class="form-control"
placeholder="Masukan Nama" required value="<?php echo
$data['nama_peserta']; ?>" />
</div>

<div class="form-group">
<label>Sekolah:</label>
<input type="text" name="sekolah" class="form-control"
placeholder="Masukan Nama Sekolah" required value="<?php echo
$data['sekolah']; ?>" />
</div>

<div class="form-group">
<label>Tanggal Lahir:</label>
<input type="text" name="tanggal_lahir" class="form-control"
placeholder="YYYY-MM-DD" required value="<?php echo
$data['tanggal_lahir']; ?>" />
</div>

<div class="form-group">
<label>Jenis Kelamin:</label>
<select name="jenis_kelamin" class="form-control" required>
<option value="L" <?php if ($data['jenis_kelamin'] ==
'L') echo 'selected'; ?>>Laki-laki</option>
<option value="P" <?php if ($data['jenis_kelamin'] ==
'P') echo 'selected'; ?>>Perempuan</option>
</select>
</div>

<div class="form-group">
<label>No telepon:</label>
<input type="text" name="no_telepon" class="form-control"
placeholder="Masukan No telepon" required value="<?php echo
$data['no_telepon']; ?>" />
</div>

<div class="form-group">
<label>Alamat:</label>
<textarea name="alamat" class="form-control" rows="5"
placeholder="Masukan Alamat" required><?php echo
$data['alamat']; ?></textarea>
</div>

18
 <input type="hidden" name="id_peserta" value="<?php echo
$data['id_peserta']; ?>" />

<button type="submit" name="submit" class="btn btn-

primary">Submit</button>
<a href="index.php" class="btn btn-secondary"
role="button">Kembali</a>
</form>
</div>
</body>
</html>

Source Code HTML di atas adalah halaman formulir untuk mengupdate

data peserta lomba balap karung pelajar nasional. Selain itu Source Code ini
mengatur tampilan web mulai dari title hingga form yang ada pada halaman
tersebut.

2.5 Styles.css
body {
background-image: url('bgimage.jpg');
background-size: cover;
background-position: center center;
backdrop-filter: blur(10px);
margin: 0;
padding: 0;
height: 100vh;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
color: black
}

.content {
position: relative;
z-index: 1;
}

.navbar {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.container {
margin-top: 50px;
}

h4 {
color: black;
font-family: 'Montserrat', sans-serif;

19
 font-weight: bold;
}

table {
background-color: rgba(255, 255, 255, 0.8);
}

th, td {
text-align: center;
}

.btn {
margin-right: 5px;
}

a {
color: #fff;
}

.navbar-logo {
max-height: 40px;
height: auto;
}

Secara ringkas, kode CSS ini membuat tampilan halaman web yang
menarik dengan latar belakang gambar yang kabur, teks yang diatur gayanya, dan
konten yang terpusat. Desain ini mencakup navbar dengan border yang halus,
pemformatan tabel, penataan tombol, dan warna tautan yang disesuaikan. Jenis
huruf 'Helvetica' dan 'Montserrat' digunakan untuk elemen teks.

2.6 Script.js
function validateForm() {
var nama =
document.forms["registrationForm"]["nama_peserta"].value;
var sekolah =
document.forms["registrationForm"]["sekolah"].value;
var tanggalLahir =
document.forms["registrationForm"]["tanggal_lahir"].value;
var jenisKelamin =
document.forms["registrationForm"]["jenis_kelamin"].value;
var noTelepon =
document.forms["registrationForm"]["no_telepon"].value;
var alamat =
document.forms["registrationForm"]["alamat"].value;

if (nama == "" || sekolah == "" || tanggalLahir == "" ||

jenisKelamin == "" || noTelepon == "" || alamat == "") {
alert("Semua kolom harus diisi!");
return false;

20
 }
var teleponPattern = /^[0-9]+$/;
if (!teleponPattern.test(noTelepon)) {
alert("Nomor telepon hanya boleh berisi angka!");
return false;
}

return true;
}

Fungsi ini ditulis dalam bahasa JavaScript dan bertujuan untuk

memvalidasi formulir pendaftaran. Fungsi ini berfungsi sebagai alat validasi
sederhana untuk memastikan pengguna mengisi formulir pendaftaran dengan benar
sebelum mengirimkannya.

Gambar diatas merupakan tampilan dari halaman pendaftaran peserta.

Pada halaman tersebut ditampilkan dari fungsi javascript, dimana ketika pengguna
tidak memasukan data pada form, maka halaman web akan mengeluarkan
pemberitahuan seperti pada gambar.

21
 BAB III
UPLOAD GIT
3.1 Buat Repositori di Github

Gambar diatas merupakan proses pembuatan repositori baru di Github.

Setelah langkah tersebut pengguna bisa membuka Git Bash untuk mengupload file
atau folder ke github

3.2 Inisialisasi Git

Gambar tersebut menunjukkan tampilan jendela perintah (command line)

pada komputer. Jendela perintah tersebut terbuka di direktori
C:\xampp\htdocs\crud. Pengguna yang sedang mengoperasikan komputer
tersebut bernama Made Yohan.
Pada baris pertama, pengguna menjalankan perintah git init untuk
menginisialisasi repositori Git baru di direktori tersebut. Perintah ini akan membuat
folder .git di dalam direktori tersebut, yang berisi semua informasi yang
diperlukan untuk mengelola repositori Git. Pada baris kedua, pengguna

22
menjalankan perintah git add. untuk menambahkan semua file dan folder di
dalam direktori tersebut ke repositori Git.
3.3 Membuat Commit ke Repositori Git

Gambar diatas, pengguna menjalankan perintah git commit -m "first

init github" untuk membuat commit pertama ke repositori Git. Commit ini akan

menyimpan snapshot dari semua file dan folder yang telah ditambahkan ke
repositori.
3.4 Menambahakan Repositori Jarak Jauh

Gambar diatas, pengguna menjalankan perintah git remote add origin

https://github.com/YohanLagi/UAS-TOOL-TI.git untuk menambahkan
repositori jarak jauh ke repositori Git lokal. Repositori jarak jauh adalah repositori
Git yang berada di server lain. Dengan menambahkan repositori jarak jauh,
pengguna dapat menyinkronkan perubahan dari repositori lokal ke repositori jarak
jauh, dan sebaliknya.
Pada baris selanjutnya, pengguna menjalankan perintah git branch -M
main untuk mengubah cabang default dari master menjadi main. Cabang adalah
versi dari proyek yang dapat dilacak secara terpisah dari versi lainnya. Cabang main
biasanya digunakan untuk menyimpan versi stabil dari proyek.
Pada baris berikutnya, pengguna menjalankan perintah git push -u
origin main untuk mendorong perubahan dari cabang main ke repositori jarak
jauh. Perintah ini akan membuat commit baru di repositori jarak jauh.

23
3.5 Github

Bisa dilihat pada gambar diatas, folder yang dipilih sudah berhasil di
upload ke Github. Berikut adalah link repositori dari Github saya
https://github.com/YohanLagi/UAS-TOOL-TI

24