Tugas kali ini adalah membuat website sederhana yang memanfaatkan jQuery. jQuery adalah sebuah library JavaScript yang diperlukan sebagai solusi dikarenakan terdapat beberapa perbedaan implementasi JavaScript pada suatu browser misal Microsoft Explorer dengan Chrome milik Google. Di sini terdapat dua implementasi pemanfaatan jQuery yaitu validasi form dengan dynamic option select pada input. Untuk aplikasi website sendiri dapat di aksses pada link berikut.
Konten dari aplikasi web:
1. Home Page, halaman utama dimana user dapat memilih implementasi jQuery mana yang ingin dicoba.
2. Tambah Page, menambah data option pada input select.
3. Validasi Page, halaman yang dapat melakukan validasi input pada form.
Home Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="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>jKweri</title> | |
| <style> | |
| body { | |
| font-family: 'Poppins'; | |
| text-align: center; | |
| justify-content: center; | |
| background-image: url('gdsc_bg.png'); | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| background-size: cover; | |
| } | |
| h1 { | |
| font-size: 42px; | |
| margin-bottom: 20px; | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .btn-info { | |
| background: #c8f377; | |
| color: black; | |
| } | |
| .btn-info:hover { | |
| background: #42d756; | |
| color: black; | |
| } | |
| .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>Web-app with simple jQuery</h1> | |
| <center> | |
| <button class="btn btn-info" onclick="window.location.href='./tambah-data.html'">Tambah Data</button> | |
| <button class="btn btn-info" onclick="window.location.href='./validasi-form.html'">Validasi Form</button> | |
| </center> | |
| </div> | |
| </body> | |
| </html> |
Tambah Data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="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 Barang Baru</h2> | |
| <div class="col-2"> | |
| <button class="btn-purple" onclick="window.location.href='../'">Kembali</button> | |
| </div> | |
| </div> | |
| <form autocomplete="off"> | |
| <div class="input-group"> | |
| <label class="label">Nama Barang</label> | |
| <input class="input-style" type="text" name="titleBook" id="titleBook"> | |
| </div> | |
| <div class="input-group"> | |
| <label class="label">Daftar Barang</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-green" id="btnAdd" type="button" value="Tambah"> | |
| </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> |
Validasi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="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-purple" 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">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-green" 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" | |
| }, | |
| password1: { | |
| required: "Kolom password harus diisi" | |
| }, | |
| password2: { | |
| required: "Kolom konfirmasi password harus diisi", | |
| equalTo: "Password tidak sama" | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Stylesheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*--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, #ddfc2c 0%, #6C4079 100%); | |
| background: -moz-linear-gradient(bottom left, #ddfc2c 0%, #6C4079 100%); | |
| background: -o-linear-gradient(bottom left, #ddfc2c 0%, #6C4079 100%); | |
| background: linear-gradient(to top right, #ddfc2c 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-green { | |
| 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: #42d756; | |
| } | |
| .btn-green:hover { | |
| background: #73e482; | |
| } | |
| .btn-purple { | |
| 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: #c53dc5; | |
| } | |
| .btn-purple:hover { | |
| background: #d466d4; | |
| } | |
| /*--ERROR--*/ | |
| .error { | |
| font-size: small; | |
| color: red; | |
| } |
Comments
Post a Comment