Cara Membuat Blog dengan HTML CSS dan JavaScript

4 Mar, 2024
Cara Membuat Blog dengan HTML CSS dan javascript

Cara Membuat Blog dengan HTML CSS dan JavaScript - Pada kesempatan ini, saya akan memberikan panduan membuat blog sederhana HTML dan CSS, serta menyimpan data secara lokal lewat LocalStorage. Jadi blog yang akan dibuat ini bisa menampilkan, menambahkan, update, dan hapus.

LocalStorage adalah fitur pada browser web yang bisa menyimpan data dalam bentuk key-value pairs secara local di device user. Data yang disimpan dalam localStorage tetap tersedia bahkan setelah pengguna menutup browser atau close. Data tersebut akan tetap tersimpan sampai user mendelete atau melalui penghapusan cache browser.

Sebelum membuat, berikut alat yang harus disiapkan.

  • Komputer/Laptop/Android. jika tidak punya silahkan pinjam teman anda.
  • Aplikasi Text Editor. anda bisa menggunakan notepad, notepad++, VSC, sublime text, dll.
  • Browser. untuk membuka file websitenya nanti.
  • Niat yang Tulus. tanpa niat usahamu akan sia-sia.

Cara Membuat Blog dengan Html

Berikut panduan lengkap membuat blog sederhana tanpa database MySQL sebagai berikut.

1. Buat file index.html

Langkah pertama buka aplikasi text editor dan buat file dengan nama index.html sebagai halaman utama web, kemudian copy dan paste kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog - Halaman Utama</title>
    <style>

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f0f0f0;
}

header {
    background: #333;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
}

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

nav ul li {
    display: inline;
    margin-right: 20px;
}

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

.hero {
    text-align: center;
    padding: 100px 20px;
    background: #f4f4f4;
}

.hero h2 {
    margin-bottom: 20px;
    font-size: 2.5em;
}

.hero p {
    font-size: 1.2em;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #555;
}

.articles {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 50px;
}

.article {
    flex-basis: calc(33.33% - 40px);
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.article:hover {
    transform: translateY(-5px);
}

.article h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

.article p {
    margin-bottom: 15px;
    color: #555;
}

.footer {
    background: #333;
    color: #fff;
    margin-top: 80px;
    text-align: center;
    padding: 20px;
    width: 100%;
}

a.link{
    color:white;
}



    </style>

</head>
<body>
    <header>
        <h1>Blog Saya</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Artikel</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <h2>Selamat datang di Blog Saya</h2>
        <p>Temukan berbagai artikel menarik tentang topik yang Anda minati.</p>

        <!-- arahkan ke halaman artikel -->
        <a href="#" class="btn">Lihat Artikel</a>
    </section>

    <footer>
        <p class="footer">Hak Cipta &copy; 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
    </footer>
</body>
</html>


2. Buat file blog.html

Kemudian buat file dengan nama blog.html, file ini digunakan untuk menampilkan daftar artikel yang dibuat nantinya, untuk codenya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artikel | Ansori Web</title>
    <style>

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f0f0f0;
}

header {
    background: #333;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
}

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


nav ul li {
    display: inline;
    margin-right: 20px;
}

.hero {
    text-align: center;
    padding: 100px 20px;
    background: #f4f4f4;
}

.hero h2 {
    margin-bottom: 20px;
    font-size: 2.5em;
}

.hero p {
    font-size: 1.2em;
    color: #666;
}

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

.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #555;
}

.articles {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 50px;
}

.article {
    flex-basis: calc(33.33% - 40px);
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.article:hover {
    transform: translateY(-5px);
}

.article h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

.article p {
    margin-bottom: 15px;
    color: #555;
}

.footer {
    background: #333;
    color: #fff;
    margin-top: 80px;
    text-align: center;
    padding: 20px;
    width: 100%;
}

a.link{
    color:white;
}



    </style>

</head>
<body>
    <header>
        <h1>Blog Saya</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Artikel</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    
    <section class="hero">
        <h2>Daftar Artikel</h2>
        <p>Temukan berbagai artikel menarik tentang topik yang Anda minati.</p>

        <!-- arahkan ke halaman buat artikel -->
        <a href="#" class="btn">Tambahkan Artikel</a>
    </section>

    <section class="articles" id="articles-container">
        <!-- Artikel akan ditambahkan di sini secara otomatis -->
    </section>

    <footer>
        <p class="footer">Hak Cipta &copy; 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
    </footer>

    <script>
        // Ketika halaman dimuat
        document.addEventListener('DOMContentLoaded', function () {
            const articlesContainer = document.getElementById('articles-container');

            // Ambil artikel dari localStorage
            let articles = [];
            if (localStorage.getItem('articles')) {
                articles = JSON.parse(localStorage.getItem('articles'));
            }

            // Tampilkan artikel di halaman
            articles.forEach(function (article) {
                displayArticle(article);
            });

            // Fungsi untuk menampilkan artikel
            function displayArticle(article) {
                const articleElement = document.createElement('article');
                articleElement.classList.add('article');
                articleElement.innerHTML = `
                    <h3>${article.title}</h3>
                    <p>${article.content}</p>
                    <a href="https://www.ansoriweb.com/" class="btn">Baca Artikel</a>
                `;
                articlesContainer.appendChild(articleElement);
            }
        });
    </script>

</body>
</html>

3. Buat file tambah-artikel.html

Kemudian buat file baru dengan nama tambah-artikel.html, file ini digunakan untuk fungsi menambahkan artikel, melihat artikel pada tabel, dan menghapus artikel. Untuk fitur update bisa di kreasikan sendiri. Untuk codenya sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tambahkan Artikel | Ansori Web</title>
    <style>
        /* Reset CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
        }

        header {
            background: #333;
            color: #fff;
            padding: 20px;
        }

        header h1 {
            margin: 0;
        }

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

        nav ul li {
            display: inline;
            margin-right: 20px;
        }

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

        .hero {
            text-align: center;
            padding: 100px 20px;
            background: #f4f4f4;
        }

        .hero h2 {
            margin-bottom: 20px;
            font-size: 2.5em;
        }

        .hero p {
            font-size: 1.2em;
            color: #666;
        }

        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .btn:hover {
            background: #555;
        }

        .add-article {
            text-align: center;
            margin-top: 50px;
        }

        .add-article h2 {
            margin-bottom: 20px;
        }

        .add-article form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .add-article form div {
            margin-bottom: 20px;
        }

        .add-article form label {
            display: block;
            margin-bottom: 5px;
        }

        .add-article form input[type="text"],
        .add-article form textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
            width: 100%;
            margin-top: 50px;
        }

        .footer a {
            color: white;
        }

        .articles {
            margin-top: 30px;
            text-align: center;
            padding: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .delete-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }

        .delete-btn:hover {
            background-color: #d32f2f;
        }

        table {
            width: 80%;
            border-collapse: collapse;
            margin-top: 20px;
        }

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

        th {
            background-color: #333;
            color: #fff;
        }

    </style>
</head>
<body>
    <header>
        <h1>Blog Saya</h1>
        <nav>
            <ul>
                <li><a href="/index.html">Beranda</a></li>
                <li><a href="#">Artikel</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section class="add-article">
        <h2>Tambah Artikel Baru</h2>
        <form id="article-form">
            <div>
                <label for="title">Judul:</label>
                <input type="text" id="title" name="title" required>
            </div>
            <div>
                <label for="content">Konten:</label>
                <textarea id="content" name="content" rows="4" required></textarea>
            </div>
            <button type="submit" class="btn">Tambah Artikel</button>
        </form>
    </section>

    <section class="articles">
        <table>
            <thead>
                <tr>
                    <th>Judul</th>
                    <th>Konten</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody id="article-list">
                <!-- Articles will be dynamically inserted here -->
            </tbody>
        </table>
    </section>

    <footer>
        <p class="footer">Hak Cipta &copy; 2024 <a class="link" href="https://www.ansoriweb.com/">AnsoriWeb.com</a></p>
    </footer>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const articleForm = document.getElementById('article-form');
            const articlesSection = document.querySelector('.articles');

            // Menangani submit form untuk menambahkan artikel baru
            articleForm.addEventListener('submit', function (e) {
                e.preventDefault();

                // Mengambil data dari form
                const title = document.getElementById('title').value;
                const content = document.getElementById('content').value;

                // Membuat objek artikel
                const article = {
                    title: title,
                    content: content
                };
                // Menampilkan alert
                showAlert();

                // Mengosongkan form
                articleForm.reset();

                // Menyimpan artikel ke localStorage
                saveArticle(article);

                displayArticles(); 
            });

            // Fungsi untuk menyimpan artikel ke localStorage
            function saveArticle(article) {
                let articles = [];
                if (localStorage.getItem('articles')) {
                    articles = JSON.parse(localStorage.getItem('articles'));
                }
                articles.push(article);
                localStorage.setItem('articles', JSON.stringify(articles));
            }

            // Fungsi untuk menampilkan alert
            function showAlert() {
                alert('Artikel berhasil ditambahkan!');
            }
        });


        document.addEventListener('DOMContentLoaded', function () {
            // Your existing JavaScript code here

            // Function to display articles in the table
            function displayArticles() {
                const articleList = document.getElementById('article-list');
                articleList.innerHTML = ''; // Clear existing content

                // Retrieve articles from localStorage
                let articles = JSON.parse(localStorage.getItem('articles')) || [];

                // Iterate through articles and append rows to the table
                articles.forEach(function (article, index) {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${article.title}</td>
                        <td>${article.content}</td>
                        <td><button class="delete-btn" data-index="${index}">Delete</button></td>
                    `;
                    articleList.appendChild(row);
                });
            }

            // Initial display of articles
            displayArticles();

             // Event listener to handle article deletion
             document.getElementById('article-list').addEventListener('click', function (event) {
                if (event.target.classList.contains('delete-btn')) {
                    const index = event.target.dataset.index;
                    deleteArticle(index);
                }
            });

            // Function to delete article from localStorage and update table
            function deleteArticle(index) {
                let articles = JSON.parse(localStorage.getItem('articles')) || [];
                articles.splice(index, 1);
                localStorage.setItem('articles', JSON.stringify(articles));
                displayArticles(); // Refresh table
            }
            
        });
        

        
        
    </script>
</body>
</html>

4. Jalankan kode

Setelah berhasil dibuat, saatnya buka ketiga file diatas menggunakan browser. Untuk preview tampilan blognya sebagai berikut dan bisa dikembangkan lagi dengan kreativitas masing-masing.

Cara Membuat Blog dengan HTML CSS dan JavaScript

Cara Membuat Blog dengan HTML CSS dan JavaScript

Cara Membuat Blog dengan HTML CSS dan JavaScript

Kesimpulan

Demikian panduan membuat blog dengan html dan css tanpa database menggunakan LocalStorage JavaScript, semoga tutorial webiste ini bermanfaat bagi kita semua yang sedang mencari referensi yang diberikan oleh guru anda. Jika ada pertanyaan atau kurang jelas, script error, atau segala pertanyaan tentang artikel ini bisa ditanyakan melalui kolom komentar dibawah ini. Terima Kasih.

Next Post Previous Post
No Comment
Add Comment
comment url