BAB I

PENDAHULUAN

A. Latar Belakang
Dalam era digital yang terus berkembang pesat seperti saat ini, teknologi informasi telah
menjadi bagian tak terpisahkan dari kehidupan sehari-hari. Salah satu perkembangan yang paling
signifikan dalam teknologi informasi adalah internet. Internet telah memungkinkan akses instan
terhadap informasi dari berbagai sumber, mengubah cara kita berinteraksi, belajar, dan bekerja.

Dalam konteks pendidikan dan produktivitas, kebutuhan untuk mengatur informasi dan mencatat
ide-ide penting telah menjadi semakin penting. Tradisi mencatat secara manual telah digantikan oleh
solusi digital yang lebih efisien dan mudah diakses. Seiring dengan itu, permintaan akan platform
digital yang memungkinkan pengguna untuk membuat, menyimpan, dan mengakses catatan secara
efisien semakin meningkat.

Dalam rangka memenuhi kebutuhan tersebut, pembuatan website untuk mencatat atau "notes"
menjadi solusi yang populer. Website notes memberikan keunggulan dalam hal aksesibilitas,
kolaborasi, dan fleksibilitas. Pengguna dapat dengan mudah mengakses catatan mereka dari berbagai
perangkat, berbagi catatan dengan rekan kerja atau teman, serta menyimpan catatan secara aman
dalam format digital yang mudah dicari dan diorganisir.

Makalah ini akan membahas proses pembuatan sebuah website notes, termasuk pemilihan teknologi
yang tepat, desain antarmuka pengguna yang intuitif, dan fitur-fitur penting yang harus disertakan.
Selain itu, makalah ini juga akan mengeksplorasi manfaat dan tantangan yang terkait dengan
pengembangan dan penggunaan website notes dalam konteks modern.

Dengan memahami tantangan dan peluang yang terkait dengan pembuatan website notes,
diharapkan pembaca dapat memperoleh wawasan yang mendalam tentang bagaimana
memanfaatkan teknologi informasi untuk meningkatkan produktivitas dan efisiensi dalam mengelola
informasi.

1
B. Tujuan Penulisan
Makalah ini bertujuan untuk menjelaskan proses pembuatan sebuah website notes yang efektif dan
efisien. Tujuan utama penulisan makalah ini adalah untuk memberikan pemahaman yang
komprehensif kepada pembaca tentang langkah-langkah yang diperlukan untuk menciptakan sebuah
platform digital yang memungkinkan pengguna untuk membuat, menyimpan, dan mengakses
catatan dengan mudah.

Lebih khusus lagi, tujuan-tujuan penulisan makalah ini adalah sebagai berikut:

1. Menjelaskan konsep dan kebutuhan dasar dari sebuah website notes dalam konteks pengelolaan
informasi modern.

2. Mendiskusikan langkah-langkah teknis yang terlibat dalam pengembangan sebuah website notes,
termasuk pemilihan teknologi, desain antarmuka pengguna, dan fitur-fitur yang relevan.

3. Mengidentifikasi manfaat dari penggunaan website notes, seperti aksesibilitas yang lebih baik,
kemampuan untuk berkolaborasi, dan efisiensi dalam mengorganisir informasi.

4. Menyajikan panduan praktis bagi pembaca yang tertarik untuk memulai pengembangan sebuah
website notes, termasuk sumber daya dan rekomendasi terkait.

Dengan mempertimbangkan tujuan-tujuan di atas, makalah ini diharapkan dapat menjadi panduan
yang berguna bagi mereka yang tertarik dalam menciptakan solusi digital untuk mengelola catatan
dan informasi secara efektif dalam lingkungan personal, akademis, atau profesional.

2
 BAB II
LANDASAN TEORITIS

A. CODINGAN WEBSITE
( Index1.php )
<?php
$judul = $judul_err = $judulcatatan = $judulcatatan_err = $kategori = $kategori_err = $cari =
$cari_err = "";
require_once "koneksi.php";
$message = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["action"])) {
$action = $_POST["action"];

if ($action == "add") {
$judul = $_POST["judul"];
$judulcatatan = $_POST["judulcatatan"];
$kategori = $_POST["kategori"];

$sql = "INSERT INTO notes_aja (judul, catatan, kategori) VALUES ('$judul', '$judulcatatan',
'$kategori')";

if ($conn->query($sql) === TRUE) {

$message = "Note added successfully";
} else {
$message = "Error: " . $sql . "<br>" . $conn->error;
}
} elseif ($action == "edit") {
$cari = $_POST["cari"];
$sql = "SELECT * FROM notes_aja WHERE judul = '$cari'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$judul = $row['judul'];
$judulcatatan = $row['catatan'];
$kategori = $row['kategori'];
} else {
$message = "Catatan dengan judul '$cari' tidak ditemukan.";
}
} elseif ($action == "save") {
$judul_lama = $_POST["judul_lama"];
$judul_baru = $_POST["judul"];
$judulcatatan = $_POST["judulcatatan"];
$kategori = $_POST["kategori"];
$sql = "UPDATE notes_aja SET judul='$judul_baru', catatan='$judulcatatan',
kategori='$kategori' WHERE judul='$judul_lama'";

if ($conn->query($sql) === TRUE) {

3
 $message = "Note updated successfully";
} else {
$message = "Error updating note: " . $conn->error;
}
} elseif ($action == "clear") {
$judul = $judulcatatan = $kategori = $cari = "";
} elseif ($action == "view") {
header("Location: tampil.php");
exit();
}
}
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Notes</title>
<link href='favicon.ico' rel='shortcut icon'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style1.php">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/
Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="containerBg">
<br><br>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header"></div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
method="post">
<h2 style="text-align: center;">Aplikasi Notes</h2>
<hr>
<div class="form-group <?php echo (!empty($judul_err)) ? 'has-error' : ''; ?>">
<label>Judul</label>
<input type="text" name="judul" id="judul" class="form-control" value="<?php echo
$judul; ?>">
<span class="help-block"><?php echo $judul_err; ?></span>
</div>
<div class="form-group">
<label>Catatan</label>
<textarea name="judulcatatan" id="judulcatatan" class="form-control"><?php echo
$judulcatatan; ?></textarea>

4
 </div>
<div class="form-group">
<label>Kategori</label>
<input type="text" name="kategori" id="kategori" class="form-control" value="<?php
echo $kategori; ?>">
</div>
<div class="form-group <?php echo (!empty($cari_err)) ? 'has-error' : ''; ?>">
<label>Cari Judul</label>
<div class="input-group">
<input type="text" name="cari" class="form-control" style="height: 38px;"
value="<?php echo $cari; ?>">
<button type="submit" class="btn btn-outline-secondary" style="height: 38px;"
name="submit">
<i class="fa fa-search"></i>
</button>
</div>
<span class="help-block"><?php echo $cari_err; ?></span>
<input type="hidden" name="action" value="edit">
</div>
<br>
<div class="row">
<div class="col-md-3">
<button type="submit" class="btn btn-outline-success btn-block" id="add_button"
name="action" value="add" disabled><i class="fa fa-plus"></i> Add</button>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-outline-primary btn-block" name="action"
value="save"><i class="fa fa-save"></i> Save</button>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-outline-dark btn-block" name="action"
value="view"><i class="fa fa-eye"></i> View</button>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-outline-danger btn-block" name="action"
value="clear"><i class="fa fa-trash-o"></i> Clear</button>
</div>
</div>
<input type="hidden" name="judul_lama" value="<?php echo $judul; ?>">

<script>
const judulInput = document.getElementById('judul');
const catatanInput = document.getElementById('judulcatatan');
const kategoriInput = document.getElementById('kategori');
const addButton = document.getElementById('add_button');

judulInput.addEventListener('keyup', () => {
updateButtonState();

5
 });
catatanInput.addEventListener('keyup', () => {
updateButtonState();
});
kategoriInput.addEventListener('keyup', () => {
updateButtonState();
});

function updateButtonState() {
addButton.disabled = !judulInput.value || !catatanInput.value || !
kategoriInput.value;
}
</script>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

6
 B. CODINGAN WEBSITE
( style1.php )

<?php
header("Content-type: text/css; charset: UTF-8");
?>

.containerBg {
width: 100%;
height: 100%;
--s: 140px;

--_g: #0000 52%, #170409 /* first color */ 54% 57%, #0000 59%;
background: radial-gradient(farthest-side at -33.33% 50%, var(--_g)) 0
calc(var(--s) / 2),
radial-gradient(farthest-side at 50% 133.33%, var(--_g)) calc(var(--s) / 2)
0,
radial-gradient(farthest-side at 133.33% 50%, var(--_g)),
radial-gradient(farthest-side at 50% -33.33%, var(--_g)), #67917a; /* second color */
background-size: calc(var(--s) / 4.667) var(--s),
var(--s) calc(var(--s) / 4.667);
}

body {
font-family: Arial, sans-serif;
background-color: #fff;
margin: 20px;
}

form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 8px;
}

input[type="text"],
textarea {
width: 100%;
padding: 8px;
margin-bottom: 12px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
background-color: #4caf50;
color: #fff;
padding: 10px 15px;

7
 border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 12px;
}

button:hover {
background-color: #45a049;
}

button:active {
background-color: #3e8e41;
}

@media only screen and (max-width: 600px) {

form {
padding: 10px;
}

input[type="text"],
textarea {
margin-bottom: 8px;
}

button {
padding: 8px 12px;
margin-right: 20px;
}
}

8
 C. CODINGAN WEBSITE
( tampil.php )

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
background-color: fff;
padding: 20px;
}

.container {
max-width: 800px;
margin: 0 auto;
}

.table-container {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
margin-top: 20px;
background-color: #fff;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

th {
background-color: #f2f2f2;
}

.checkbox-td {
text-align: center;
}
.buttons-container {
display: flex;
justify-content: space-between;
}

9
 .back-button {
flex: 1;
}

.delete-button {
margin-left: auto;
}
.checkbox-wrapper input[type="checkbox"] {
visibility: hidden;
display: none;
}

.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
box-sizing: border-box;
user-select: none;
}

.checkbox-wrapper {
position: relative;
display: block;
overflow: hidden;
}

.checkbox-wrapper .label {
cursor: pointer;
}

.checkbox-wrapper .check {
width: 50px;
height: 50px;
position: absolute;
opacity: 0;
}

.checkbox-wrapper .label svg {

vertical-align: middle;
}

.checkbox-wrapper .path1 {
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: .5s stroke-dashoffset;
opacity: 0;
}

.checkbox-wrapper .check:checked + label svg g path {

stroke-dashoffset: 0;
opacity: 1;
}
.containerBg {
width: 100%;
height: 100%;
--s: 140px;

10
 --_g: #0000 52%, #170409 54% 57%, #0000 59%;
background: radial-gradient(farthest-side at -33.33% 50%, var(--_g)) 0
calc(var(--s) / 2),
radial-gradient(farthest-side at 50% 133.33%, var(--_g)) calc(var(--s) / 2)
0,
radial-gradient(farthest-side at 133.33% 50%, var(--_g)),
radial-gradient(farthest-side at 50% -33.33%, var(--_g)), #67917a;
background-size: calc(var(--s) / 4.667) var(--s),
var(--s) calc(var(--s) / 4.667);
}
</style>
</head>
<body class="containerBg">
<div class="container">
<?php
require_once "koneksi.php";

$link = mysqli_connect($servername, $username, $password, $database);

$search = isset($_GET['search']) ? mysqli_real_escape_string($link, $_GET['search']) : '';

$sql = "SELECT * FROM notes_aja WHERE judul LIKE '%$search%'";

if ($result = mysqli_query($link, $sql)) {
if (mysqli_num_rows($result) > 0) {
echo "<div class='table-container'>";
echo "<table>";
echo "<thead>";
echo "<tr>";
echo "<th style='text-align:left'>No</th>";
echo "<th style='text-align:center'>Judul</th>";
echo "<th style='text-align:center'>Catatan</th>";
echo "<th style='text-align:center'>Kategori</th>";
echo "<th class='checkbox-td'>Pilih</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";

$nomor = 1;

while ($row = mysqli_fetch_array($result)) {

echo "<tr>";
echo "<td>" . $nomor . ".</td>";
echo "<td>" . $row['judul'] . "</td>";
echo "<td>" . $row['catatan'] . "</td>";
echo "<td>" . $row['kategori'] . "</td>";
echo "<td class='checkbox-td'>";
echo "<div class='checkbox-wrapper'>";
echo "<input type='checkbox' class='check' id='check_" . $row['id'] . "' value='" . $row['id'] . "'>";
echo "<label for='check_" . $row['id'] . "' class='label'>";
echo "<svg width='45' height='45' viewBox='0 0 95 95'>";
echo "<rect x='30' y='20' width='50' height='50' stroke='black' fill='none'></rect>";
echo "<g transform='translate(0,-952.36222)'>";
echo "<path d='m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4'
stroke='black' stroke-width='3' fill='none' class='path1'></path>";
echo "</g>";
echo "</svg>";

11
 echo "</label>";
echo "</div>";
echo "</td>";
echo "</tr>";

$nomor++;
}
echo "</tbody>";
echo "</table>";
echo "</div>";
echo '<div class="buttons-container">';
echo '<div class="back-button"><br>';
echo '<button onclick="location.href=\'index1.php\'" type="button" class="btn btn-outline-warning"><i
class="fa fa-arrow-left"></i> Back</button>';
echo '</div>';
echo '<div class="delete-button"><br>';
echo '<button type="button" class="btn btn-outline-danger" onclick="deleteSelectedNotes()"><i class="fa
fa-trash-o"></i> Delete Selected</button>';
echo '</div>';
echo '</div>';
?>
<?php
mysqli_free_result($result);

} else {
echo "<p class='lead'><em>No records were found.</em></p>";
}
} else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

mysqli_close($link);
?>
</div>
<script>
function deleteSelectedNotes() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var ids = [];
checkboxes.forEach(function(checkbox) {
ids.push(checkbox.value);
});

if (ids.length === 0) {

alert("🙏🙏🙏 Harap pilih terdahulu untuk menghapus nya");

return;
}

if (confirm("🤨 Yakin yang ini ???")) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {

12
 alert("🥳 Anda telah berhasil menghapus nya");
location.reload();
} else {

alert("😵‍💫😵‍💫😵‍💫");
}
}
};
xhr.open("POST", "hapus.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("ids=" + ids.join(","));
}
}
</script>

</body>
</html>

13
 D. CODINGAN WEBSITE
( koneksi.php )

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "notes_aja";

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

if ($conn->connect_error) {
die('<p style="color:red;">Connection failed <i class="fa fa-rss"></i>' . $conn->connect_error . '</p>');
} else {
echo '<p style="color:rgb(74, 252, 148);">Connected successfully <i class="fa fa-rss"></i></p>';
}
?>

E. CODINGAN WEBSITE
( hapus.php )

<?php
require_once "koneksi.php";

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['ids'])) {

$ids = explode(",", $_POST['ids']);
$ids = array_map('intval', $ids); // Pastikan id-id yang diterima adalah integer

// Persiapkan query untuk menghapus catatan berdasarkan id

$sql = "DELETE FROM notes_aja WHERE id IN (" . implode(",", $ids) . ")";

if ($conn->query($sql) === TRUE) {

echo "Notes have been deleted successfully.";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
} else {
echo "Invalid request.";
}

$conn->close();
?>

14
F. OUTPUT WEBSITE

indeks1.php

tampil.php

15
 BAB III
PEMBAHASAN WEBSITE

Website ini adalah website notes yang memiliki beberapa fitur untuk
membantu Anda membuat dan mengelola catatan dengan mudah. Berikut ringkasan
fiturnya:

Fitur:

1. Menambah Catatan:

 Anda dapat membuat catatan baru dengan memasukkan judul, isi, dan
kategori ( tombolnya tidakkan Aktif jika Belum memasukkan judul, isi, dan
kategorinya ).
 Judul: Berikan nama yang jelas dan ringkas untuk catatan Anda.
 Isi: Masukkan semua informasi yang ingin Anda catat.
 Kategori: Pilih kategori yang sesuai untuk membantu Anda mengelompokkan
dan menemukan catatan dengan mudah.

2. Menyimpan Catatan:

 Setelah selesai membuat atau mengedit catatan, klik tombol "Save" untuk
menyimpan perubahan.
 Catatan Anda akan disimpan secara otomatis di database website.

3. Mencari Catatan:

 Anda dapat mencari catatan berdasarkan judulnya.

 Masukkan judul yang ingin Anda cari di kolom "Cari Judul".
 Website akan menampilkan daftar catatan yang sesuai dengan judul yang
Anda masukkan.

4. Melihat Catatan:

 Anda dapat melihat daftar semua catatan yang telah Anda buat.
 Daftar ini akan menunjukkan judul, isi, dan kategori dari setiap catatan.
 Anda dapat mengklik pada judul catatan untuk melihat detailnya.

5. Menghapus Catatan:

 Anda dapat memilih dan menghapus beberapa catatan sekaligus.

 Pilih kotak centang di sebelah catatan yang ingin Anda hapus.
 Klik tombol "Hapus" untuk menghapus catatan yang dipilih.

16
 BAB IV
KESIMPULAN

Dengan menyajikan fitur-fitur yang intuitif dan lengkap, website notes ini menjadi solusi yang sangat berguna
bagi individu atau kelompok dalam mengatur informasi mereka secara efisien. Fitur penambahan catatan
memungkinkan pengguna untuk dengan cepat membuat catatan baru dengan memasukkan judul yang jelas, isi
yang informatif, dan mengelompokkannya ke dalam kategori yang sesuai. Kemampuan penyimpanan otomatis
dalam database website menjaga keamanan dan ketersediaan catatan, sementara fungsi pencarian memudahkan
pengguna dalam menemukan catatan yang diperlukan dengan cepat. Selain itu, pengguna dapat dengan mudah
melihat dan mengelola daftar semua catatan yang telah dibuat, serta menghapus catatan yang tidak diperlukan
dengan cepat dan efisien.

Dengan fokus pada pengalaman pengguna yang intuitif dan efisien, website notes ini memberikan kemudahan
bagi pengguna dalam mengatur informasi mereka. Dengan fitur-fitur yang mencakup seluruh siklus hidup
catatan, pengguna dapat dengan mudah membuat, menyimpan, mencari, melihat, dan menghapus catatan sesuai
kebutuhan mereka. Dengan demikian, website ini tidak hanya menjadi alat yang berguna untuk individu dalam
mengelola catatan pribadi mereka, tetapi juga dapat digunakan secara efektif oleh kelompok dalam proyek
kolaboratif atau kegiatan yang membutuhkan pengaturan informasi yang terkoordinasi. Dengan adanya website
notes ini, diharapkan bahwa pengguna akan dapat meningkatkan produktivitas dan efisiensi mereka dalam
mengelola informasi di era digital ini.

17