Langsung ke konten utama

Tugas 7 Pemrograman Web A

Implementasi jQuery Sederhana 

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Pada pertemuan kesepulu kelas PWEB A, kami diberikan tugas untuk mengimplemetasikan jQuery dalam program yang sederhana. Terdapat dua contoh yang perlu kami buat, yang pertama adalah membuat query baru pada sebuah drop down list berdasarkan input yang user masukkan. Kemudian, untuk contoh yang kedua, kami diminta untuk membuat sebuah animasi (Color Animation) dengan mengimplementasikan jQuery UI. Setelah kedua  contoh berhasil di susun secara lokal, contoh - contoh tersebut kemudian perlu di hosting - kan. 

Program pertama, Membuat Query Baru pada Sebuah Drop Down List Berdasarkan Input yang User Masukkan, dapat diakses di link ini.

Sedangkan untuk yang kedua, Implementasi jQuery UI untuk Membuat Sebuah Animasi, dapat diakses di link ini.

Berikut adalah tampilan dari hasil websitenya :
  1. Website Pertama

  2. Website Kedua

Source Code

Untuk source code dari masing - masing webnya, terdapat satu file source code yang saya gunakan. Didalam source code dari masing - masing web, styling dan logic-nya saya gabungkan menjadi satu file dengan tag nya masing - masing. Sedangkan untuk library - library lainnya yang saya gunakan, saya sematkan dengan memanfaatkan link dari salah satu CDN di internet. Lebih jelasnya, berikut adalah source code yang saya gunakan untuk masing - masing web :

  1. Website Pertama
    index.html
    <!-- Tugas : Coba kodingan yang ada di PPT materinya (https://fajarbaskoro.blogspot.com/2018/10/pweb-2018-4-jquery.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">
    <title>jQuery Practice</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
    body{
    position: static;
    }
    body::before{
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    background-image: url("https://www.torontopubliclibrary.ca/images/books-video-music/books/reading-challenge.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    }
    .container {
    position: relative;
    }
    .content{
    width: 600px;
    margin: auto;
    border: 5px solid lightseagreen;
    border-radius: 25px;
    background-color: rgba(17, 97, 152, 0.8);
    padding: 10px;
    margin-top: 120px;
    }
    .content form{
    width: 500px !important;
    margin: 5px;
    }
    label{
    color: rgb(240, 171, 22) !important;
    }
    h1{
    -webkit-text-stroke:rgba(17, 97, 152, 0.8) 1px !important;
    text-shadow: 0em 0em 1.0em lightseagreen, 0em 0em 1.0em lightseagreen, 0em 0em 0.2em lightseagreen
    }
    input{
    width: 300px !important;
    }
    select{
    font-weight: bold;
    width: 100px;
    }
    #btnAdd{
    width: 180px;
    background: rgb(240, 171, 22);
    font-weight: 500;
    border-color: lightseagreen;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1 class="text-center pt-5">Tambahkan Jenis Buku Baru!</h1>
    <div class="content">
    <form autocomplete="off">
    <div class="form-group mt-3 custom">
    <label class="font-weight-bold mt-1">New Book Name :</label>
    <input type="text" name="newBook" id="newBook" class="form-control">
    </div>
    <div class="form-group mt-3 custom">
    <label class="font-weight-bold mt-1">Book List :</label>
    <select name="bookList" id="bookList">
    <option value="">Select</option>
    </select>
    <br>
    </div>
    <p align="right">
    <button type="button" id="btnAdd" class="btn btn-primary mt-3">Submit</button>
    </p>
    </form>
    </div>
    </div>
    </body>
    </html>
    <script>
    $(`#btnAdd`).click(function() {
    var newBook = $(`#newBook`).val();
    if(newBook == ''){
    return;
    }
    else if ($('#bookList option:contains('+ newBook +')').length) {
    return;
    }
    else{
    $(`#bookList`).append(new Option(newBook, newBook));
    }
    });
    </script>
    view raw index.html hosted with ❤ by GitHub


  2. Website Kedua
    index.html
    <!-- Tugas : Coba buat contoh yang ada di link https://jqueryui.com/animate/ -->
    <!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">
    <title>jQuery UI Effect - Animate Demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <style>
    body{
    position: static;
    width: 100%;
    height: 100%;
    background-image: url("https://i.pinimg.com/originals/a8/7b/66/a87b66b8337ed8239efa234826febf6e.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    }
    h1{
    color: whitesmoke;
    -webkit-text-stroke:rgba(17, 97, 152, 0.8) 1px !important;
    text-shadow: 0em 0em 1.0em lightseagreen, 0em 0em 1.0em lightseagreen, 0em 0em 0.2em lightseagreen
    }
    .toggler{
    height : 100%;
    position: relative;
    }
    #effect{
    height: 250px;
    padding: 0.4em;
    position: relative;
    background: transparent;
    border: 5px solid lightseagreen;
    border-radius: 25px;
    background-color: rgba(33, 142, 193, 0.8);
    font-size : 13px;
    }
    #effect h3{
    margin: 0;
    padding: 0.4em;
    text-align: center;
    background-color: transparent;
    border-color: transparent;
    }
    .content{
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }
    #effect p{
    padding: 10px;
    }
    #button{
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: rgba(17, 97, 152, 0.8);
    font-weight: bold;
    border-color: whitesmoke;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1 class="text-center pt-5">jQuery Color Animation</h1>
    <div class="content">
    <div class="toggler">
    <div id="effect" class="ui-widget-content-ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Color Animation</h3>
    <p>
    Animate the properties of elements between colors. jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.
    </p>
    </div>
    </div>
    </div>
    <br><br>
    <p align="center">
    <button id="button" class="btn btn-primary mt-3">Toggle Effect</button>
    </p>
    </div>
    </body>
    </html>
    <script>
    $(function() {
    var state= true;
    $('#button').on('click', function() {
    if(state){
    $('#effect').animate({
    width: "500px",
    marginLeft : -100,
    "background-color" : "rgba(24, 53, 173, 0.8)",
    "color" : "whitesmoke",
    "font-size" : "16px"
    }, 1000);
    $('#effect h3').animate({
    "color" : "rgb(240, 171, 22)"
    }, 1000);
    }
    else{
    $('#effect').animate({
    width: "300px",
    marginLeft : 0,
    "background-color" : "rgba(33, 142, 193, 0.8)",
    "color" : "black",
    "font-size" : "13px"
    }, 1000);
    $('#effect h3').animate({
    "color" : "black"
    }, 1000);
    }
    state = !state;
    });
    });
    </script>
    view raw index.html hosted with ❤ by GitHub
Sekian pengerjaan tugas yang telah saya lakukan. Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Terima kasih atas perhatiannya.

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5 Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel  dan video player  pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat  Warung Tegal Website . Berikut adalah tampilan dari hasilnya : Tampilan Beranda Tampilan Daftar Masakan Tampilan Katering Tampilan Tentang Tampilan Kontak Source Code Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas : Halaman Beranda Halaman Daftar Masakan Halaman Katering Halaman Tentang Halaman Ko...
Posting Komentar
Baca selengkapnya