Langsung ke konten utama

TUGAS 8 PEMROGRAMAN WEB (D) - jQuery Sederhana


Tugas kali ini membuat website yang mengimplementasikan jQuery. jQuery adalah sebuah library JavaScript yang diperlukan sebagai solusi karena terdapat beberapa perbedaan implementasi JavaScript dari satu web browser dengan web browser lain. Di sini terdapat 2 aplikasi, yaitu tambah data ke dalam sebuah kolom select, dan satu lagi validasi form. Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap & Custom), dan JavaScript (internal). Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai Netlify.

Konten dari website:

  1. Main page, berisi halaman untuk redirect aplikasi implementasi jQuery mana yang akan dicoba/dipilih.
  2. Tambah page, berisi halaman aplikasi tambah data untuk suatu kolom select.
  3. Validasi page, berisi halaman aplikasi validasi form.

Tampilan Website

  1. Main page

  2. Tambah page (sebelum ditambah)

  3. Tambah page (setelah ditambah)
    • Setelah buku dientri, maka datanya akan masuk ke list kolom select "Daftar Buku".
    • Jika entri data yang dimasukkan kosong, maka tidak akan menambah data baru pada list kolom select "Daftar Buku".

  4. Validasi page (tampilan awal)

  5. Validasi page (jika kolom tidak diisi)

    • Tiap input memiliki rule sendiri-sendiri dengan nama ID input didefinisikan ke dalam jQuery Validate untuk validasinya. Rule-rule tersebut antara lain:
      • NRP: digits (true), minlength (14), maxlength (14)
      • Umur: digits (true), range(1 - 100)
      • Email: email (true)
      • Situs: url (true)
      • Password2: equalTo (password1)
    • Lalu, dari tiap rule tersebut juga dapat diganti messages default-nya sesuai keinginan.

Source Code

  • index.html (Main Page)
    • <!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">
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Simple jQuery App</title>
    <style>
    body {
    font-family: 'Poppins';
    text-align: center;
    justify-content: center;
    background-image: url('yc.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    h1 {
    font-size: 42px;
    margin-bottom: 20px;
    color: white;
    font-weight: bold;
    }
    button {
    margin-left: 10px;
    margin-right: 10px;
    transition-duration: 0.4s;
    }
    .container {
    top: 50%;
    left: 50%;
    position: absolute;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    animation: fadein 1.5s;
    }
    @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
    }
    @-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Simple jQuery App</h1>
    <center>
    <button class="btn btn-info" onclick="window.location.href='./tambah-data/'">Tambah Data</button>
    <button class="btn btn-info" onclick="window.location.href='./validasi-form/'">Validasi Form</button>
    </center>
    </div>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • index.html (Tambah Page)
    • <!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">
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <link href="css/style.css" rel="stylesheet" media="all">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Tambah Data dengan jQuery</title>
    </head>
    <body>
    <div class="page-wrapper bg-gradient">
    <div class="wrapper">
    <div class="card">
    <div class="card-body">
    <div class="row row-space">
    <h2 class="title">Tambah Buku Baru</h2>
    <div class="col-2">
    <button class="btn-green" onclick="window.location.href='../'">Back</button>
    </div>
    </div>
    <form autocomplete="off">
    <div class="input-group">
    <label class="label">Nama Buku</label>
    <input class="input-style" type="text" name="titleBook" id="titleBook">
    </div>
    <div class="input-group">
    <label class="label">Daftar Buku</label>
    <div class="select-wrapper">
    <select name="listBook" id="listBook" class="select-style">
    <option selected="selected" disabled="disabled" value="">Pilih</option>
    </select>
    </div>
    </div>
    <div class="p-t-15">
    <input class="btn-blue" id="btnAdd" type="button" value="Add">
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    <script>
    $(document).ready(function() {
    $('#btnAdd').click(function () {
    var newBook = $('#titleBook').val();
    if (newBook == "") {
    return;
    }
    else {
    $('#listBook').append(new Option(newBook, newBook));
    }
    });
    });
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • style.css (Tambah Page)
    • /*--BOX SIZING--*/
    html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    * {
    padding: 0;
    margin: 0;
    }
    *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }
    /*--GRID--*/
    .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    .row-space {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    }
    .col-2 {
    width: -webkit-calc((100% - 30px) / 2);
    width: -moz-calc((100% - 30px) / 2);
    width: calc((100% - 30px) / 2);
    }
    @media (max-width: 767px) {
    .col-2 {
    width: 100%;
    }
    }
    /*--RESET--*/
    body, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, dd, ol, ul, figure, hr, fieldset, legend {
    margin: 0;
    padding: 0;
    }
    fieldset {
    min-width: 0;
    border: 0;
    }
    button {
    outline: none;
    background: none;
    border: none;
    }
    /*--REMOVE DEFAULT TABLE SPACING--*/
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /*--REMOVE TRAILING MARGINS FROM NESTED LISTS--*/
    li > ol, li > ul {
    margin-bottom: 0;
    }
    /*--PAGE WRAPPER--*/
    .page-wrapper {
    min-height: 100vh;
    padding-top: 65px;
    padding-bottom: 65px;
    }
    /*--FONTS--*/
    body {
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 14px;
    }
    /*--BACKGROUND--*/
    .bg-gradient {
    background: -webkit-gradient(linear, left bottom, right top, from(#FC2C77), to(#6C4079));
    background: -webkit-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: -moz-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: -o-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: linear-gradient(to top right, #FC2C77 0%, #6C4079 100%);
    }
    /*--WRAPPER--*/
    .wrapper {
    margin: 0 auto;
    max-width: 680px;
    }
    /*--TITLE--*/
    .title {
    font-size: 24px;
    color: #525252;
    font-weight: 600;
    margin-bottom: 40px;
    }
    /*--CARD--*/
    .card {
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    }
    .card .card-body {
    padding: 57px 65px;
    }
    @media (max-width: 767px) {
    .card .card-body {
    padding: 50px 40px;
    }
    }
    /*--FORM--*/
    input {
    outline: none;
    margin: 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    }
    .input-style {
    line-height: 50px;
    background: #FAFAFA;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 20px;
    font-size: 16px;
    color: #666666;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }
    .input-style::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #666666;
    }
    .input-style::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #666666;
    opacity: 1;
    }
    .input-style:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #666666;
    }
    select {
    outline: none;
    margin: 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    }
    .select-style {
    line-height: 50px;
    background: #FAFAFA;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0px 20px;
    font-size: 16px;
    color: #666666;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }
    .select-wrapper {
    position: relative;
    }
    .select-wrapper::after {
    content: "▼";
    color: #666666;
    font-size: 0.8rem;
    top: 15px;
    right: 15px;
    position: absolute;
    opacity: 80%;
    }
    .label {
    font-size: 16px;
    color: #555555;
    text-transform: capitalize;
    display: block;
    margin-bottom: 5px;
    }
    .input-group {
    position: relative;
    margin-bottom: 22px;
    }
    .btn-blue {
    margin-top: 15px;
    display: inline-block;
    line-height: 50px;
    padding: 0 50px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 18px;
    color: #FFFFFF;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #4272D7;
    }
    .btn-blue:hover {
    background: #3868CD;
    }
    .btn-green {
    display: flex;
    float: right;
    line-height: 40px;
    padding: 0 20px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 16px;
    color: #FFFFFF;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #57B846;
    }
    .btn-green:hover {
    background: #4DAE3c;
    }
    /*--ERROR--*/
    .error {
    font-size: small;
    color: red;
    }
    view raw style.css hosted with ❤ by GitHub
  • index.html (Validasi Page)
    • <!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">
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <link href="css/style.css" rel="stylesheet" media="all">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="css/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <title>Validasi Form dengan jQuery</title>
    </head>
    <body>
    <div class="page-wrapper bg-gradient">
    <div class="wrapper">
    <div class="card">
    <div class="card-body">
    <div class="row row-space">
    <h2 class="title">Form Data Mahasiswa</h2>
    <div class="col-2">
    <button class="btn-green" onclick="window.location.href='../'">Back</button>
    </div>
    </div>
    <form id="form-mhs">
    <div class="input-group">
    <label class="label">NRP</label>
    <input class="input-style" type="text" name="nrp" id="nrp" maxlength="14" required>
    </div>
    <div class="input-group">
    <label class="label">Nama</label>
    <input class="input-style" type="text" name="nama" id="nama" maxlength="50" required>
    </div>
    <div class="input-group">
    <label class="label">Alamat</label>
    <textarea class="textarea-style" name="alamat" id="alamat" rows="3" required></textarea>
    </div>
    <div class="row row-space">
    <div class="col-2">
    <div class="input-group">
    <label class="label">Tanggal Lahir</label>
    <input class="input-style" type="date" name="tanggal" id="tanggal" required>
    </div>
    </div>
    <div class="col-2">
    <div class="input-group">
    <label class="label">Umur</label>
    <input class="input-style" type="number" name="umur" id="umur" required>
    </div>
    </div>
    </div>
    <div class="input-group">
    <label class="label">Email</label>
    <input class="input-style" type="email" name="email" id="email" required>
    </div>
    <div class="input-group">
    <label class="label">Situs Website</label>
    <input class="input-style" type="url" name="situs" id="situs" required>
    </div>
    <div class="input-group">
    <label class="label">Password</label>
    <input class="input-style" type="password" name="password1" id="password1" required>
    </div>
    <div class="input-group">
    <label class="label">Konfirmasi Password</label>
    <input class="input-style" type="password" name="password2" id="password2" required>
    </div>
    <div class="p-t-15">
    <button class="btn-blue" type="submit">Submit</button>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#form-mhs').validate({
    rules: {
    nrp: {
    digits: true,
    minlength: 14,
    maxlength: 14
    },
    umur: {
    digits: true,
    range: [0, 100]
    },
    email: {
    email: true
    },
    situs: {
    url: true
    },
    password2: {
    equalTo: "#password1"
    }
    },
    messages: {
    nrp: {
    required: "Kolom NRP harus diisi",
    minlength: "Kolom NRP harus 14 digit",
    maxlength: "Kolom NRP harus 14 digit"
    },
    nama: {
    required: "Kolom nama harus diisi"
    },
    alamat: {
    required: "Kolom alamat harus diisi"
    },
    tanggal: {
    required: "Kolom tanggal lahir harus diisi",
    },
    umur: {
    required: "Kolom umur harus diisi"
    },
    email: {
    required: "Kolom email harus diisi",
    email: "Masukkan format email dengan benar"
    },
    situs: {
    required: "Kolom situs website harus diisi",
    url: "Masukkan format situs website dengan benar"
    },
    password1: {
    required: "Kolom password harus diisi"
    },
    password2: {
    required: "Kolom konfirmasi password harus diisi",
    equalTo: "Password tidak sama"
    }
    }
    });
    });
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • style.css (Validasi Page)
    • /*--BOX SIZING--*/
    html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    * {
    padding: 0;
    margin: 0;
    }
    *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }
    /*--GRID--*/
    .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    .row-space {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    }
    .col-2 {
    width: -webkit-calc((100% - 30px) / 2);
    width: -moz-calc((100% - 30px) / 2);
    width: calc((100% - 30px) / 2);
    }
    @media (max-width: 767px) {
    .col-2 {
    width: 100%;
    }
    }
    /*--RESET--*/
    body, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, dd, ol, ul, figure, hr, fieldset, legend {
    margin: 0;
    padding: 0;
    }
    fieldset {
    min-width: 0;
    border: 0;
    }
    button {
    outline: none;
    background: none;
    border: none;
    }
    /*--REMOVE DEFAULT TABLE SPACING--*/
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /*--REMOVE TRAILING MARGINS FROM NESTED LISTS--*/
    li > ol, li > ul {
    margin-bottom: 0;
    }
    /*--PAGE WRAPPER--*/
    .page-wrapper {
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px;
    }
    /*--FONTS--*/
    body {
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    font-weight: 400;
    font-size: 14px;
    }
    /*--BACKGROUND--*/
    .bg-gradient {
    background: -webkit-gradient(linear, left bottom, right top, from(#FC2C77), to(#6C4079));
    background: -webkit-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: -moz-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: -o-linear-gradient(bottom left, #FC2C77 0%, #6C4079 100%);
    background: linear-gradient(to top right, #FC2C77 0%, #6C4079 100%);
    }
    /*--WRAPPER--*/
    .wrapper {
    margin: 0 auto;
    max-width: 680px;
    }
    /*--TITLE--*/
    .title {
    font-size: 24px;
    color: #525252;
    font-weight: 600;
    margin-bottom: 40px;
    }
    /*--CARD--*/
    .card {
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    }
    .card .card-body {
    padding: 57px 65px;
    }
    @media (max-width: 767px) {
    .card .card-body {
    padding: 50px 40px;
    }
    }
    /*--FORM--*/
    input {
    outline: none;
    margin: 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    }
    .input-style {
    line-height: 50px;
    background: #FAFAFA;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 20px;
    font-size: 16px;
    color: #666666;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    }
    .input-style::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #666666;
    }
    .input-style::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #666666;
    opacity: 1;
    }
    .input-style:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #666666;
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }
    /* Firefox */
    input[type=number] {
    -moz-appearance: textfield;
    }
    textarea {
    outline: none;
    margin: 0;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    }
    .textarea-style {
    line-height: 50px;
    background: #FAFAFA;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 20px;
    font-size: 16px;
    color: #666666;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    resize: none;
    }
    .textarea-style::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #666;
    }
    .textarea-style::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #666666;
    opacity: 1;
    }
    .textarea-style:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #666666;
    }
    .label {
    font-size: 16px;
    color: #555555;
    text-transform: capitalize;
    display: block;
    margin-bottom: 5px;
    }
    .input-group {
    position: relative;
    margin-bottom: 22px;
    }
    .btn-blue {
    margin-top: 15px;
    display: inline-block;
    line-height: 50px;
    padding: 0 50px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 18px;
    color: #FFFFFF;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #4272d7;
    }
    .btn-blue:hover {
    background: #3868CD;
    }
    .btn-green {
    display: flex;
    float: right;
    line-height: 40px;
    padding: 0 30px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 16px;
    color: #FFFFFF;
    font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #57B846;
    }
    .btn-green:hover {
    background: #4DAE3C;
    }
    /*--ERROR--*/
    .error {
    font-size: small;
    color: red;
    }
    view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 3 PEMROGRAMAN 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 mengaplikasikan penggunaan embed video dari Youtube dan image carousel atau slideshow . Laman website-nya dapat diakses pada  link berikut . Untuk  hosting  web sendiri memakai  Netlify . Konten dari website: Main page , berisi daftar makanan, masakan populer, kontak dari warung tegal, serta menu apa saja yang tersedia di dalam website. Tampilan Website Main page Source Code index.html style.css
Posting Komentar
Baca selengkapnya

ETS PEMROGRAMAN BERORIENTASI OBJEK (B) - Mesin ATM

1. Tuliskan skenario fungsionalitas aplikasi berdasarkan tayangan tersebut! Pada video yang ada, ditampilkan proses setor tunai pada mesin ATM. Jadi, awalnya nasabah memasukkan kartu ATM ke dalam mesin. Lalu, memasukkan nomor pin sebanyak 6 digit sesuai yang telah didaftarkan. Jika pin salah, maka mesin akan meminta mengulangi agar memasukkan pin yang benar. Nah, di mesin ATM ini sendiri ada beberapa fitur yaitu setor tunai, penarikan tunai, dan transaksi lainnya (seperti transfer, pembayaran listrik, dll.). Dalam video, nasabah ingin melakukan proses setor tunai. Perlu diketahui di beberapa mesin, setor tunai ada yang menerima pecahan uang Rp100.000,00 saja, ada juga yang juga menerima Rp50.000,00, di video sepertinya hanya menerima Rp100.000,00. Lalu, juga ada batas maksimal berapa nominal atau jumlah uang yang dimasukkan, di video batasnya adalah 50 lembar. Jika lebih, maka kelebihannya akan dikembalikan oleh mesin. Setelah memasukkan uang ke dalam mesin, mesin akan memproses dan ke...
Posting Komentar
Baca selengkapnya

TUGAS 3 REKAYASA KEBUTUHAN (A) - Elisitasi Kebutuhan SI Evaluasi Kegiatan Sekretariat ITS

Tugas kali ini melakukan elisitasi kebutuhan dari salah satu  Spesifikasi Kebutuhan Perangkat Lunak  (SPKL) dari aplikasi  SI Evaluasi Kegiatan Sekretariat ITS (SIETS)   yang dibuat oleh Insitut Teknologi Sepuluh Nopember (ITS) Surabaya . Sistem Informasi ini merupakan sistem yang diwacanakan untuk memenuhi kebutuhan ITS akan penerimaan masukan dari berbagai kegiatan ITS yang bersifat daring akibat pandemi COVID-19 agar nantinya semasa transisi dari luring ke daring sistem dapat berjalan dengan lancar. Untuk SKPL-nya sendiri dapat dilihat di bawah ini: Elisitasi Elisitasi adalah teknik untuk memperoleh informasi melalui percakapan dengan sesorang dimana orang tersebut tidak sadar sedang digali informasi yang dimiliki. Proses elisitasi digunakan untuk menentukan kebutuhan suatu sistem dengan cara berkomunikasi dengan pengguna tentang perkembangan kebutuhan sistem yang akan dibangun. Ada beberapa hal yang dapat dianalisis sebagai tahap penjajakan dalam memban...
Posting Komentar
Baca selengkapnya