Skip to main content

Tugas (6) Pemrograman Web D - Form Login & Contact Us dengan Bootstrap

 Tugas kali ini membuat website form login dan contact us menggunakan salah satu framework CSS paling populer yaitu Bootstrap. Dalam pengerjaannya digunakan HTML, CSS(Bootstrap) dan custom, serta sedikit JavaScript. JS digunakan untuk menampilkan alert bahwa data telah berhasil di-submit atau dikirim. Laman website dapan diakses pada link berikut. Untuk hosting web digunakan Vercel.



Website terdiri dari satu halaman dan 2 bagian:

  1. Login form, berisi halaman yang memuat form untuk login, dan sign in. Email dan password tidak boleh kosong.
  2. Newsletter section, berisi informasi mengenai pengguna yang ingin berlangganan berita update dari website ini.

Source Code

  • index.html
    <!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">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <script src="index.js"></script>
    <title>Log in</title>
    </head>
    <body>
    <main class="container-fluid">
    <div id="login" class="row align-items-center">
    <div class="row">
    <div class="col"></div>
    <div id="left-login" class="col">
    <h3 class="text-end fw-bold fs-1 mt-3 me-4">Member log in</h3>
    <form id="loginForm" class="mt-5 me-4">
    <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label fs-5">Email (required)</label>
    <input type="email" class="form-control fs-5" id="userEmail" aria-describedby="emailHelp" required>
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label fs-5">Password (required)</label>
    <input type="password" class="form-control fs-5" id="userPassword" required>
    </div>
    <div class="row">
    <div class="col">
    <a type="submit" class="item-ship unselect" onclick="submitForm()">Log in</a>
    </div>
    <div class="col me-5">
    <div class="row">
    <a href="#" class="text-end" style="text-decoration: underline; color:dimgray">Forgot password?</a>
    </div>
    </div>
    </div>
    </form>
    </div>
    <div class="col">
    <h3 class="text-start fw-bold fs-1 mt-3 ms-4">Become a member</h3>
    <div class="mt-5 ms-4">
    <a class="fs-5" style="text-decoration: none; color: black;">Enjoy members-only pricing, early access to new products, giveaways and more! Join today (it's FREE!)</a>
    </div>
    <a type="submit" class="signup-btn unselect ms-4">Sign up</a>
    </div>
    <div class="col"></div>
    </div>
    </div>
    <div class="row contact-us">
    <div class="col-5">
    <h3 class="text-start fw-bold fs-1 mt-3">Join our community</h3>
    <a href="#" target="_blank"><img class="community-item" src="./images/twitch.svg" alt="Twitch" title="Twitch" height="30"></a>
    <a href="#" target="_blank"><img class="community-item" src="./images/twitter.svg" alt="Twitter" title="Twitter" height="30"></a>
    <a href="#" target="_blank"><img class="community-item" src="./images/youtube.svg" alt="YouTube" title="YouTube" height="30"></a>
    </div>
    <div class="col-2"></div>
    <div class="col-5">
    <h3 class="text-end fw-bold fs-1 mt-3">Subscribe to our newsletter</h3>
    <form class="mt-5 me-4">
    <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label fs-5">Name (required)</label>
    <input type="text" class="form-control fs-5" id="exampleInputEmail1" aria-describedby="nameHelp">
    </div>
    <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label fs-5">Email (required)</label>
    <input type="email" class="form-control fs-5" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label fs-5">Phone</label>
    <input type="number" class="form-control fs-5" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="row">
    <div class="col">
    <a type="submit" class="item-ship unselect">Subscribe</a>
    </div>
    </div>
    </form>
    </div>
    </div>
    <footer class="row justify-content-center mt-5 mb-3">
    <div class="footer-copyright text-center text-sm"><a>© Axel Briano Suherik 2021</a></div>
    </footer>
    </main>
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • main.css
    main, body {
    margin: 0px;
    }
    #login {
    height: 100vh;
    background-color: rgb(248, 248, 248);
    }
    #left-login {
    border-right: 2px solid rgb(212, 212, 212);
    }
    .unselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    .item-ship {
    font-weight: 600;
    font-size: 1.3rem;
    text-align: center;
    text-decoration: none;
    padding: 0.6em 1em;
    margin-top: 1em;
    color: white;
    background-color: #FC4E03;
    }
    .item-ship:hover {
    background-color: #FD834E;
    color: white;
    }
    .signup-btn {
    font-weight: 600;
    font-size: 1.3rem;
    text-align: center;
    text-decoration: none;
    padding: 0.6em 1em;
    margin-top: 1.5em;
    color: white;
    background-color: #121212;
    }
    .signup-btn:hover {
    background-color: #525252;
    color: white;
    }
    .contact-us {
    margin-top: 4em;
    margin-left: 18em;
    margin-right: 18em;
    margin-bottom: 14em;
    }
    .community-item {
    color: black;
    margin-right: 1em;
    margin-top: 1em;
    }
    view raw main.css hosted with ❤ by GitHub
  • index.js
    function submitForm() {
    const res = validateForm();
    if (res) {
    alert("Logged in");
    } else {
    // alert("Ada field yang belum terisi");
    }
    }
    function validateForm() {
    console.log(`submitted`);
    if (document.forms["loginForm"]["userEmail"].value == "") {
    alert("Email cannot be empty");
    document.forms["loginForm"]["userEmail"].focus();
    return false;
    }
    if (document.forms["loginForm"]["userPassword"].value == "") {
    alert("Password cannot be empty");
    document.forms["loginForm"]["userPassword"].focus();
    return false;
    }
    return true;
    }
    view raw index.js hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas (3) Pemgrograman Web D - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan  JavaScript  serta  VSCode  sebagai  text editor . Di website ini, saya menggunakan carousel dan ada satu content video pada carousel tersebut menggunakan tag html video . Untuk websitenya sendiri bisa di akses melalui link berikut . Content website terdiri dari carousel, lalu ada video promosi Warung Tegal. Kemudian menu yang disediakan. Berikut merupakan preview dari Website Warung Tegal Source code index.html carousel.css carousel.js Axel Briano Suherik 05111940000137 Pweb - D
Post a Comment
Read more

Tugas 5 Rekayasa Kebutuhan (A) - Spesifikasi Kebutuhan Aplikasi Moka

Tugas kali ini adalah membuat spesifikasi kebutuhan dari suatu aplikasi bernama Moka. PoS merupakan sistem untuk memudahkan proses pembayaran para pelanggan di suatu pelaku usaha ketika membeli suatu produk atau jasa. Sistem PoS biasanya digunakan pada smartphone, tablet, komputer atau mesin EDC. Moka perupakan suatu aplikasi yang menerapkan  point-of-sales (PoS), Moka menggabungkan perangkat lunak dan perangkat keras membentuk sistem untuk memudahkan transaksi oleh pelaku usaha dengan pelanggan. Dengan Moka pelaku usaha dapat melakukan beragam hal seputar penjualan, mulai dari membuat entry produk atau jasa baru, mengatur stok, harga, keterangan, serta menampilkan grafik grafik data transaksi yang sudah di akumulasi dengan cepat dan secara real-time . Kebutuhan Fungsional Sistem menyediakan fitur login Sistem menyediakan fitur register Sistem menyediakan sejumlah opsi jenis usaha Sistem menyediakan fitur untuk mengelola menu Sistem menyediakan fitur untuk melakukan pengelolaan sh...
Post a Comment
Read more