LapUKK23 - Tressa Anastasya

LAPORAN
APLIKASI BERBASIS WEB PERSIAPAN UKK
NAMA : TRESSA ANASTASYA

KELAS : XII RPL
SEKOLAH MENENGAH KEJURUAN NEGERI 3 PARIAMAN

KOMPETENSI KEAHLIAN REKAYASA PERANGKAT LUNAK
TAHUN PELAJARAN 2022/2023
1. Home
Tampilan Halaman Home
Code Halaman Home

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman Home</title>
<script
src="http://localhost/PWPB/Pelatihan/asset/jquery/jquery.
min.js"></script>
<script
src="http://localhost/PWPB/Pelatihan/asset/js/bootstrap.m
in.js"></script>
<link rel="stylesheet" type="text/css"
href="http://localhost/PWPB/Pelatihan/asset/css/bootstrap
.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-
light">
<a class="navbar-brand" href="#">SMK N 3 PARIAMAN</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"

id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home.php">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
href="taruna.php">Taruna</a>
</li>
<a class="nav-link" href="about.php">About</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Selamat Datang di Website Saya!
</h1>
<p class="lead">Halo, nama saya Tressa Anastasya
<hr class="my-4">
<a type="button" class="btn btn-primary"

href="taruna.php">Masuk</a>
</div>
<?php
error_reporting(0);
$target=$_GET['target'];
if ($target=="taruna") {
include("taruna.php");
}
elseif ($target=="hapus") {
include("hapus.php");
}
elseif ($target=="edit") {
include("edit.php");
}
elseif ($target=="detail") {
include("detail.php");
}
?>
</body>
</html>
2. Data
Tampilan Halaman Data
Code Halaman Data

<!DOCTYPE html>
<html>
<head>
<title>Halaman Taruna</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
<script type="text/javascript"
src="search.js"></script>
<style type="text/css">
.form-control{
width: 25%;
}
input[type=search]{
float: right;
border: 1px solid #0af;
margin-bottom: 10px;
}
</style>
</head>
<body>
light">
<a class="navbar-brand" href="#">SMK N 3
PARIAMAN</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-
target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
</button>

<a class="nav-link" href="home.php">Home
<span class="sr-only">(current)</span></a>
</li>
<a class="nav-link"
</li>
<a class="nav-link "
href="about.php">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text
primary"> Data Taruna </h6>
</div>
<div class="ml-3 mt-3">
<a type="button" class="btn btn-primary"
href="tambah.php">Tambah Data Taruna</a>
<input type="search" class="form-control
light-table-filter" data-table="table-striped"
id="myTable" placeholder="Cari...">
</div>
<div class="card-body">
<table class="table table-striped"
id="myTable">
<?php
error_reporting(0);
$id = $_POST['id'];
$nama = $_POST['nama'];
$nisn = $_POST['nisn'];
$email = $_POST['email'];
$jurusan = $_POST['jurusan'];
include ("koneksi.php");
$sql = "INSERT INTO data (id, nama, nisn, email,
kom_kel) VALUES ('$id', '$nama','$nisn', '$email',
'$jurusan')";
if (mysqli_query($koneksi, $sql)) {
//echo "Data berhasil diinputkan";
}
else {
//echo "Data gagal diinputkan" . $sql . "<br>" .
mysqli_error($koneksi);
}
$sql = "SELECT *FROM data";

$hasil = $koneksi->query($sql);
?>
<?php
if ($hasil->fetch_assoc()) {
echo "<table class= 'table table-bordered table-
hover '>
<tr>
<th style='text-align: center; background-
color: gray'>No</th>
<th style='text-align: center;
background-color: gray'>Nama</th>
background-color: gray'>NISN</th>
background-color: gray'>Email</th>
background-color: gray'>Kompetensi Keahlian</th>
background-color: gray'>Aksi</th>
</tr>";
while ($baris = $hasil->fetch_assoc()) {
echo "<tr>
<td>".$baris['id']."</td>
<td>".$baris['nama']."</td>
<td>".$baris['nisn']."</td>
<td>".$baris['email']."</td>
<td>".$baris['kom_kel']."</td>
<td>
<a class='btn btn-
success btn-sm btn-block' role='button' title='Edit'
href='edit.php?target=edit&id=".$baris['id']."'>
<i class='fa fa-
edit'></i>Edit</a>
<a class='btn btn-

primary btn-sm btn-block' role='button' title='detail'
href='detail.php?target=detail&id=".$baris['id']."'>
<i class='fa fa-
detail'></i>Detail</a>
<a class='btn btn-

danger btn-sm btn-block' role='button' title='hapus'
href='hapus.php?target=hapus&id=".$baris['id']."'>
<i class='fa fa-
hapus'></i>Hapus</a>
</td>
</tr>";
}
echo "</table>";
}
mysqli_close($koneksi);
?>
</div>
</div>
</body>
</html>
3. Tambah Data
Tampilan Halaman Tambah Data
Code Halaman Tambah Data

<!DOCTYPE html>
<html>
<head>
<title>Halaman Input Data Taruna</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
</head>
<body>
light">
PARIAMAN</a>
</button>

</li>
<a class="nav-link"
</li>
</li>
</ul>
</div>
</nav>

<h6 class="m-0 font-weight-bold text-
primary">INPUT DATA TARUNA</h6>
</div>
<table class="table table-striped">
<tbody>


<form role="form" method="post"
action="taruna.php" enctype="multipart/form-data">
<div class="box-body">
<div class="form-group">
<label>ID</label><br>
<input type="text"
name="id" class="form-control" placeholder="Masukkan ID"
required>
</div>
<label>Nama</label><br>
<input type="text"
name="nama" class="form-control" placeholder="Masukkan
Nama" required>
</div>
<label>NISN</label>
<input type="text"
name="nisn" class="form-control" placeholder="Masukkan
NISN" required>
</div>
<label>Email</label><br>
<input type="text"
name="email" class="form-control" placeholder="Masukkan
Email" required>
</div>
<label>Kompetensi
Keahlian</label><br>
<select class="form-
control" name="jurusan" class="form-control"
placeholder="jurusan" required>
<option value="">--
Pilih Kompetensi Keahlian--</option>
<option
value="Rekayasa Perangkat Lunak "> Rekayasa Perangkat
Lunak </option>
<option
value="Teknik Komputer dan Jaringan"> Teknik Komputer dan
Jaringan </option>
<option
value="Teknik Pendingin dan Tata Udara"> Teknik Pendingin
dan Tata Udara </option>
<option
value="Agrebisnis Perikanan Air Tawar"> Agrebisnis
Perikanan Air Tawar </option>
<option
value="Nautika Kapal Penangkap Ikan"> Nautika Kapal
Penangkap Ikan </option>
<option
value="Teknika Kapal Penangkap Ikan"> Teknika Kapal
</select>
</div>
<div class="box-footer">
<button type="submit"
class="btn btn-primary" title="Simpan Data">
<i class="glyphicon
glyphicon-floppy-disk"></i> Simpan</button>
</div>
</div>
</form>
</tbody>
</table>
</div>
</div>
</body>
</html>
4. Edit
Tampilan Halaman Edit
Code Halaman Edit

<!DOCTYPE html>
<html>
<head>
<title>Halaman Edit</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
</head>
<body>
light">
PARIAMAN</a>
</button>

</li>
<a class="nav-link"
</li>
<a class="nav-link"
</li>
</ul>
</div>
</nav>
<?php
include "koneksi.php";
$id = $_GET['id'];
$sql = "SELECT * FROM data WHERE id=$id";
$baris = $hasil->fetch_assoc();
?>
<form action="proses.php" method="get">

<h6 class="m-0 font-weight-bold text-
primary">EDIT DATA TARUNA</h6>
</div>
<table class="table table-striped">
<tbody>
<div class="box-body">
<label>ID</label><br>
<input type="text"
name="id" class="form-control" placeholder="Masukkan ID"
required value="<?php echo $baris['id']; ?>">
</div>
<label>Nama</label><br>
<input type="text"
name="nama" class="form-control" placeholder="Masukkan
Nama" required value="<?php echo $baris['nama']; ?>">
</div>
<label>NISN</label>
<input type="text"
name="nisn" class="form-control" placeholder="Masukkan
NISN" required value="<?php echo $baris['nisn']; ?>">
</div>
<label>Email</label><br>
<input type="text"
name="email" class="form-control" placeholder="Masukkan
Email" required value="<?php echo $baris['email']; ?>">
</div>
<label>Kompetensi
Keahlian</label><br>
<select class="form-
control" name="jurusan" class="form-control"
placeholder="jurusan" required>
<option value="">--
Pilih Kompetensi Keahlian--</option>
<option
value="Rekayasa Perangkat Lunak "> Rekayasa Perangkat
Lunak </option>
<option
value="Teknik Komputer dan Jaringan"> Teknik Komputer dan
Jaringan </option>
<option
value="Teknik Pendingin dan Tata Udara"> Teknik Pendingin
dan Tata Udara </option>
<option
value="Agrebisnis Perikanan Air Tawar"> Agrebisnis
Perikanan Air Tawar </option>
<option
value="Nautika Kapal Penangkap Ikan"> Nautika Kapal
<option
value="Teknika Kapal Penangkap Ikan"> Teknika Kapal
</select>
</div>
<div class="box-footer">
<button type="submit"
class="btn btn-primary" title="Simpan Data">
<i class="glyphicon
glyphicon-floppy-disk"></i> Simpan</button>
</div>
</div>
</form>
</tbody>
</table>
</div>
</div>
</body>
</html>
Code Proses Edit

<?php
include("koneksi.php");
$id = $_GET['id'];
$nama = $_GET['nama'];
$nisn = $_GET['nisn'];
$email = $_GET['email'];
$jurusan = $_GET['jurusan'];
$sql="UPDATE data SET nama='$nama', nisn='$nisn',

email='$email', kom_kel='$jurusan' WHERE id=$id ";
$hasil=$koneksi->query($sql);
if ($koneksi->query($sql)== True ) {
echo "Data berhasil di update";
} else{
echo "Data gagal di update";
}
header("location:taruna.php");
?>
Code Halaman Hapus

<?php
$id = $_GET['id'];
$query = mysqli_query($koneksi, "DELETE FROM data WHERE
id ='$id'");
if ($query) {
echo "<script>alert('Data Berhasil Dihapus !!!');
window.location.href='home.php?target=hapus&id=".
$baris['id']."';</script>";
} else {
echo "<script>alert('Data Gagal Dihapus !!!');
window.location.href='home.php?target=hapus&id=".
$baris['id']."';</script>";
}
header("location:taruna.php");
?>
5. Detail
Tampilan Halaman Detail
Code Halaman Detail

<!DOCTYPE html>
<html>
<head>
<title>Halaman Detail</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
</head>
<body>
light">
PARIAMAN</a>
</button>

</li>
<a class="nav-link"
</li>
</li>
</ul>
</div>
</nav>
<?php
$id = $_GET['id'];
?>
<h6> Detail Data Taruna </h6>
</div>
<div class="ml-3 mt-3"></div>
id="myTable">
<tbody>
<tr>
<td
width="30%"><label>Nama</label></td>
<td width="70%"><?=
$baris['nama']; ?></td>
</tr>
<tr>
<td
width="30%"><label>NISN</label></td>
<td width="70%"><?=
$baris['nisn']; ?></td>
</tr>
<tr>
<td
width="30%"><label>Email</label></td>
<td width="70%"><?=
$baris['email']; ?></td>
</tr>
<tr>
<td
width="30%"><label>Kompetensi Keahlian</label></td>
<td width="70%"><?=
$baris['kom_kel']; ?></td>
</tr>
<tr>
<td>
<a class="btn btn-
primary btn-sm btn-block" role="button" title="keluar"
href="taruna.php?target=taruna&id='.$baris['id'].'">
<i class="fa fa-
detail"></i>Kembali</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
6. Search
Tampilan Search
Code Search
<!DOCTYPE html>
<html>
<head>
<title>Halaman Taruna</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
<script type="text/javascript"
src="search.js"></script>
<style type="text/css">
.form-control{
width: 25%;
}
input[type=search]{
float: right;
border: 1px solid #0af;
margin-bottom: 10px;
}
</style>
</head>
<body>
Button
<input type="search" class="form-control light-table-filter"
data-table="table-striped" id="myTable" placeholder="Cari...">
Search.js
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables =
document.getElementsByClassName(_input.getAttribute('data
-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val =
_input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ?
'none' : 'table-row';
}
return {
init: function() {
var inputs =
document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange',
function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
7. Detail
Tampilan Halaman Detail
Code Halaman Detail

<!DOCTYPE html>
<html>
<head>
<title>Halaman Detail</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
</head>
<body>
light">
PARIAMAN</a>
</button>

</li>
<a class="nav-link"
</li>
</li>
</ul>
</div>
</nav>
<?php
$id = $_GET['id'];
?>
<h6> Detail Data Taruna </h6>
</div>
<div class="ml-3 mt-3"></div>
id="myTable">
<tbody>
<tr>
<td
width="30%"><label>Nama</label></td>
<td width="70%"><?=
$baris['nama']; ?></td>
</tr>
<tr>
<td
width="30%"><label>NISN</label></td>
<td width="70%"><?=
$baris['nisn']; ?></td>
</tr>
<tr>
<td
width="30%"><label>Email</label></td>
<td width="70%"><?=
$baris['email']; ?></td>
</tr>
<tr>
<td
width="30%"><label>Kompetensi Keahlian</label></td>
<td width="70%"><?=
$baris['kom_kel']; ?></td>
</tr>
<tr>
<td>
<a class="btn btn-
primary btn-sm btn-block" role="button" title="keluar"
href="taruna.php?target=taruna&id='.$baris['id'].'">
<i class="fa fa-
detail"></i>Kembali</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
8. About
Tampilan Halaman About
Code Halaman About

<!DOCTYPE html>
<html lang="en">
<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>About</title>
<script
min.js"></script>
<script
in.js"></script>
.css">
</head>
<body>
light">
<a class="navbar-brand" href="#">SMK N 3 PARIAMAN</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
</button>

<a class="nav-link" href="home.php">Home <span
class="sr-only">(current)</span></a>
</li>
<a class="nav-link"
</li>
<a class="nav-link" href="about.php">About</a>
</li>
</ul>
</div>
</nav>
<div class="card text-center">
<h3 style="text-align: center; background-color:

burlywood;"><b>Profil</b></h3>
<img src="foto.jpg" width="190" height="250">
<h5 class="card-title" style="font-family:'Times New
Roman', sans-serif; color: darkblue; font-size:
24px;">Tressa Anastasya</h5>
<Sekolah class="card-text" style="font-size: 16px;
font-family:'Times New Roman', sans-serif;"> Saya Tressa
Anastasya<br> Sekolah Di SMKN 3 Pariaman Jurusan Rekayasa
Perangkat Lunak <br>Saya Berasal Dari Padang Alai
Kecamatan V Koto Timur Kabupaten Padang Pariaman</p>
<br>        &nbsp
;
<form>
<div class="text-center">
<h5>Sosial Media</h5>
<img src="email.png" width="30"
height="30"> [email protected] &nbsp
;
<img src="wa.jpg" width="30"
height="30"> 081365980803
<img src="ig.jpg" width="30"
height="30"> heii.asa
<img src="tele.png" width="30"
height="30"> @heyyoasa
</div>
</form>
</div>
</div>
</body>
</html>
9. Koneksi
Code Koneksi
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "taruna";
$koneksi = new mysqli ($servername, $username,

$password, $dbname);
if ($koneksi->connect_error) {
die("Koneksi Gagal :" . $koneksi-
>connect_error);
}
//echo "Koneksi Berhasil";

?>
10. Database

LapUKK23 - Tressa Anastasya

Uploaded by

Copyright:

Available Formats

LapUKK23 - Tressa Anastasya

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LapUKK23 - Tressa Anastasya

Uploaded by

Copyright:

Available Formats

LAPORAN

APLIKASI BERBASIS WEB PERSIAPAN UKK

NAMA : TRESSA ANASTASYA

SEKOLAH MENENGAH KEJURUAN NEGERI 3 PARIAMAN

Code Halaman Home

<div class="collapse navbar-collapse"

<a type="button" class="btn btn-primary"

Code Halaman Data

<div class="collapse navbar-collapse"

$sql = "SELECT *FROM data";

<a class='btn btn-

<a class='btn btn-

Code Halaman Tambah Data

<div class="collapse navbar-collapse"

<div class="card shadow mb-4">

Code Halaman Edit

<div class="collapse navbar-collapse"

<form action="proses.php" method="get">

Code Proses Edit

$sql="UPDATE data SET nama='$nama', nisn='$nisn',

Code Halaman Hapus

Code Halaman Detail

<div class="collapse navbar-collapse"

var LightTableFilter = (function(Arr) {

Code Halaman Detail

<div class="collapse navbar-collapse"

Code Halaman About

<div class="collapse navbar-collapse"

<div class="card text-center">

<h3 style="text-align: center; background-color:

$koneksi = new mysqli ($servername, $username,

//echo "Koneksi Berhasil";

You might also like