Home
Website

Membuat Website Perpustakaan Digital UKK RPL #Part1

UKK RPL - Membuat Website Perpustakaan Digital

Untuk membuat website sederhana perpustakaan digital menggunakan HTML, CSS, dan server XAMPP, berikut adalah langkah-langkah yang bisa Anda ikuti:

Langkah 1: Instalasi XAMPP

  1. Unduh XAMPP dari situs resmi XAMPP.
  2. Install XAMPP sesuai dengan sistem operasi Anda.
  3. Setelah instalasi, jalankan Apache dari control panel XAMPP untuk menjalankan server lokal.

Langkah 2: Struktur Folder

Buat folder untuk proyek website di direktori XAMPP:

  • Masuk ke direktori htdocs yang biasanya berada di C:/xampp/htdocs/.
  • Buat folder baru, misalnya perpustakaan_digital.

Langkah 3: File HTML dan CSS

Buat dua file utama: index.html dan style.css.

1. index.html

<!-- Start Code HTML Index -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perpustakaan Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Digital</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Koleksi</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section id="hero">
        <h2>Selamat Datang di Perpustakaan Digital</h2>
        <p>Akses ribuan buku secara online di perpustakaan kami - ZE COME Training Center.</p>
        <a href="#" class="btn">Lihat Koleksi</a>
    </section>
    <section id="collection">
        <h3>Koleksi Terbaru</h3>
        <div class="book-list">
            <div class="book">
                <img src="book1.jpg" alt="Judul Buku 1">
                <p>Judul Buku 1</p>
            </div>
            <div class="book">
                <img src="book2.jpg" alt="Judul Buku 2">
                <p>Judul Buku 2</p>
            </div>
            <div class="book">
                <img src="book3.jpg" alt="Judul Buku 3">
                <p>Judul Buku 3</p>
            </div>
        </div>
    </section>
    <footer>
        <p>&copy; 2024 Perpustakaan Digital. All rights reserved.</p>
    </footer>
</body>
</html>
<!-- Finish Code HTML Index -->

2. style.css

<!--Start Code CSS -->
/* Reset dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f8ff;
}

header {
    background-color: #1e90ff;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

#hero {
    background-color: #00bfff;
    color: #fff;
    padding: 50px 0;
    text-align: center;
}

#hero h2 {
    margin-bottom: 20px;
}

#hero p {
    margin-bottom: 30px;
}

.btn {
    background-color: #fff;
    color: #00bfff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.btn:hover {
    background-color: #ccc;
}

#collection {
    padding: 50px;
    text-align: center;
}

#collection h3 {
    margin-bottom: 30px;
}

.book-list {
    display: flex;
    justify-content: space-around;
}

.book {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 30%;
}

.book img {
    max-width: 100%;
    height: auto;
}

footer {
    background-color: #1e90ff;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

#search-bar {
    margin-bottom: 30px;
}

#search-bar input {
    padding: 10px;
    width: 80%;
    font-size: 16px;
}

#search-bar button {
    padding: 10px 20px;
    background-color: #00bfff;
    color: #fff;
    border: none;
    cursor: pointer;
}

#search-bar button:hover {
    background-color: #1e90ff;
}

<!--Finish Code CSS -->

Langkah 4: Menjalankan Website

  1. Simpan kedua file tersebut (index.html dan style.css) ke dalam folder perpustakaan_digital di dalam direktori htdocs.
  2. Buka browser dan ketikkan URL: http://localhost/perpustakaan_digital/.
  3. Website perpustakaan digital Anda akan tampil!

Penjelasan:

  • Header: Bagian atas website dengan judul dan navigasi.
  • Hero Section: Bagian selamat datang dengan ajakan aksi (CTA).
  • Collection: Menampilkan koleksi buku terbaru dalam grid.
  • Footer: Informasi hak cipta di bagian bawah halaman.

Anda bisa menambahkan fitur lain seperti pencarian buku, halaman detail buku, dan lain-lain sesuai kebutuhan.

Lanjutkan ke Part berikutnya ya ...

Post a Comment