One place for hosting & domains

      Membuat

      Cara Membuat Efek Gulir Parallax Menggunakan Murni CSS Saja di Chrome


      Pengantar

      CSS modern adalah alat bantu andal yang dapat Anda gunakan untuk membuat banyak fitur Antarmuka Pengguna (UI) mutakhir. Dahulu, fitur ini mengandalkan pustaka JavaScript.

      Dalam panduan ini, Anda akan menyiapkan beberapa baris CSS untuk membuat efek gulir parallax pada halaman web. Anda akan menggunakan gambar dari placekitten.com sebagai gambar latar belakang penampung.

      Anda akan memiliki halaman web dengan efek gulir parallax yang murni menggunakan CSS saja setelah menyelesaikan tutorial.

      Peringatan: Artikel ini menggunakan properti CSS eksperimental yang tidak berfungsi di semua peramban. Proyek ini telah diuji dan berfungsi di Chrome. Teknik ini kurang berhasil di Firefox, Safari, dan iOS karena adanya beberapa optimalisasi di peramban-peramban tersebut.

      Langkah 1 — Membuat Proyek Baru

      Dalam langkah ini, gunakan baris perintah untuk menyiapkan folder dan berkas proyek baru. Untuk memulai, buka terminal Anda dan buat folder proyek baru.

      Ketikkan perintah berikut untuk membuat folder proyek:

      Dalam hal ini, Anda menamai folder tersebut css-parallax. Sekarang, masuk ke folder css-parallax:

      Selanjutnya, buat berkas index.html di folder css-parallax dengan perintah nano:

      Anda akan menempatkan semua HTML untuk proyek ke dalam berkas ini.

      Di langkah selanjutnya, Anda akan mulai membuat struktur halaman web.

      Langkah 2 — Menyiapkan Struktur Aplikasi

      Dalam langkah ini, Anda akan menambahkan HTML yang diperlukan untuk membuat struktur proyek.

      Di dalam berkas index.html, tambahkan kode berikut:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Ini adalah struktur dasar kebanyakan halaman web yang menggunakan HTML.

      Tambahkan kode berikut di dalam tag <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Kode ini menghasilkan tiga bagian berbeda. Dua bagian akan memiliki gambar latar belakang, dan satu lagi akan berupa latar belakang statis dan polos.

      Dalam beberapa langkah selanjutnya, Anda akan menambahkan gaya untuk setiap bagian menggunakan kelas yang Anda tambahkan di HTML.

      Langkah 3 — Membuat Berkas CSS dan Menambahkan CSS Awal

      Dalam langkah ini, Anda akan membuat sebuah berkas CSS. Kemudian, Anda akan menambahkan CSS awal untuk menata gaya situs web dan membuat efek parallax.

      Pertama, buat berkas styles.css di folder css-parallax dengan perintah nano:

      Di sinilah Anda akan menempatkan semua CSS yang diperlukan untuk membuat efek gulir parallax.

      Selanjutnya, mulai dengan kelas .wrapper. Di dalam berkas styles.css, tambahkan kode berikut:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Kelas .wrapper mengatur properti perspective dan scroll untuk keseluruhan halaman.

      Tinggi pelipat perlu diatur ke nilai tetap agar efek dapat berfungsi. Anda dapat menggunakan unit vh viewport yang telah diatur ke 100 untuk mendapatkan ketinggian penuh viewport layar.

      Bila Anda mengatur skala gambar, bilah gulir horizontal akan ditambahkan ke layar, sehingga Anda dapat menonaktifkannya dengan menambahkan overflow-x: hidden;. Properti perspective mensimulasikan jarak dari viewport ke elemen semu yang akan Anda buat dan transformasikan lebih jauh di CSS.

      Di langkah selanjutnya, Anda akan menambahkan CSS lainnya untuk menata gaya halaman web.

      Langkah 4 — Menambahkan Gaya untuk Kelas .section

      Dalam langkah ini, Anda akan menambahkan gaya ke kelas .section.

      Di dalam berkas style.css, tambahkan kode berikut di bawah kelas wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Kelas .section mendefinisikan properti ukuran, tampilan, dan teks untuk bagian utama.

      Atur posisi relative agar anak, .parallax::after dapat sepenuhnya diposisikan secara relatif ke elemen induk .section.

      Setiap bagian memiliki view-height(vh) sebesar 100 untuk mengambil ketinggian penuh viewport. Nilai ini dapat diubah dan diatur ke ketinggian apa pun yang Anda sukai untuk setiap bagian.

      Terakhir, properti CSS selebihnya digunakan untuk memformat dan menambahkan penataan gaya pada teks di dalam setiap bagian. Properti ini memosisikan teks di tengah setiap bagian dan menambahkan warna white (putih).

      Selanjutnya, Anda akan menambahkan elemen semu dan menata gayanya untuk membuat efek parallax pada dua bagian di HTML.

      Langkah 5 — Menambahkan Gaya untuk Kelas .parallax

      Dalam langkah ini, Anda akan menambahkan gaya ke kelas .parallax.

      Pertama, Anda akan menambahkan elemen semu di kelas .parallax yang akan diberi gaya.

      Catatan: Anda dapat mengunjungi dokumentasi web MDN untuk mempelajari lebih lanjut tentang elemen semu CSS.

      Tambahkan kode berikut di bawah kelas .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Kelas .parallax menambahkan elemen semu ::after ke gambar latar belakang dan menyediakan transformasi yang diperlukan untuk efek parallax.

      Elemen semu adalah anak terakhir dari elemen dengan kelas .parallax.

      Paruh pertama dari kode menampilkan dan memosisikan elemen semu. Properti transform menjauhkan elemen semu dari kamera di z-index, lalu menskalakannya kembali untuk mengisi viewport.

      Karena elemen semu menjauh, seakan-akan bergerak lebih lambat.

      Di langkah selanjutnya, Anda akan menambahkan gambar latar belakang dan gaya latar belakang statis.

      Langkah 6 — Menambahkan Gambar dan Latar Belakang untuk Setiap Bagian

      Dalam langkah ini, Anda akan menambahkan properti CSS terakhir untuk menambahkan gambar latar belakang dan warna latar belakang bagian statis.

      Pertama, tambahkan warna latar belakang pekat ke bagian .static dengan kode berikut setelah kelas .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Kelas .static menambahkan latar belakang ke bagian statis yang tidak memiliki gambar.

      Kedua bagian dengan kelas .parallax juga memiliki kelas ekstra yang masing-masing berbeda. Gunakan kelas .bg1 dan kelas .bg2 untuk menambahkan gambar latar belakang Kitten.

      Tambahkan kode berikut ke kelas .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Kelas .bg1, .bg2 menambahkan masing-masing gambar latar belakang untuk setiap bagian.

      Gambar dari situs web placekitten. Ini adalah layanan untuk mendapatkan gambar anak kucing untuk digunakan sebagai penampung.

      Karena semua kode untuk efek gulir parallax telah ditambahkan, Anda dapat menautkan ke berkas styles.css di index.html.

      Langkah 7 — Menautkan styles.css dan Membuka index.html di Peramban

      Dalam langkah ini, Anda akan menautkan berkas styles.css dan membuka proyek di peramban untuk melihat efek gulir parallax.

      Pertama, tambahkan kode berikut ke tag <head> di berkas index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Sekarang, Anda dapat membuka berkas index.html di peramban:

      Gif efek gulir parallax

      Dengan demikian, Anda telah menyiapkan halaman web yang berfungsi dengan efek gulir. Lihatlah repositori GitHub ini untuk mengetahui kode selengkapnya.

      Kesimpulan

      Dalam artikel ini, Anda menyiapkan proyek dengan berkas index.html dan styles.css serta sekarang memiliki halaman web yang fungsional. Anda telah menambahkan struktur halaman web dan membuat gaya untuk berbagai bagian di situs.

      Anda bisa saja menempatkan gambar yang digunakan atau membuat efek parallax menjauh sehingga gerakannya menjadi lebih lambat. Anda harus mengubah jumlah piksel pada properti perspective dan transform. Jika Anda tidak ingin gambar latar belakang bergulir sama sekali, gunakan background-attachment: fixed; sebagai ganti perspective/translate/scale.



      Source link

      Cara Membuat Efek Seret dan Letakkan dengan JavaScript Vanilla dan HTML


      Pengantar

      Menyeret-dan-meletakkan adalah interaksi pengguna umum yang dapat Anda temukan dalam banyak antarmuka pengguna.

      Ada beberapa pustaka JavaScript yang sudah ada untuk menambahkan fitur seret-dan-letakkan ke aplikasi Anda. Namun, mungkin ada situasi ketika pustaka tidak tersedia atau menimbulkan overhead atau dependensi yang tidak diperlukan proyek Anda. Dalam situasi ini, pengetahuan API yang tersedia untuk Anda di peramban web modern dapat menawarkan solusi alternatif.

      HTML Drag and Drop API bergantung pada model kejadian DOM untuk mengambil informasi tentang apa yang sedang diseret atau diletakkan serta memperbarui elemen itu saat menyeret atau meletakkan. Dengan penangan kejadian JavaScript, Anda dapat mengubah elemen apa saja menjadi item yang dapat diseret atau item yang dapat diletakkan ke dalamnya.

      Dalam tutorial ini, kita akan membuat contoh seret-dan-letakkan menggunakan HTML Drag and Drop API bersama JavaScript vanilla untuk menggunakan penangan kejadian.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

      • Peramban web modern yang mendukung Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Langkah 1 — Membuat Proyek dan Markup Awal

      Proyek kita akan terdiri dari kontainer dengan dua tipe elemen anak:

      • Elemen anak yang dapat Anda seret
      • Elemen anak yang dapat memiliki elemen yang diletakkan ke dalamnya

      Pertama, buka jendela terminal Anda dan buat direktori proyek baru:

      • mkdir drag-and-drop-example

      Selanjutnya, navigasikan ke direktori itu:

      Kemudian, buat berkas index.html dalam direktori itu:

      Selanjutnya, tambahkan kode boilerplate untuk halaman web HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Lalu, di antara tag <body> tambahkan item draggable dan dropzone (target peletakan):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Simpan dan tutup berkas. Kemudian, buat berkas style.css:

      Selanjutnya, tambahkan gaya untuk elemen dalam berkas index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Ini akan menambahkan beberapa pemformatan pada aplikasi. Sekarang Anda dapat melihat index.html di peramban dan mengamati bahwa ini menghasilkan draggable <div> dan dropzone <div>.

      Tangkapan layar draggable div dan dropzone div

      Selanjutnya, kita secara eksplisit akan membuat <div> pertama yang dapat diseret dengan menambahkan atribut draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Simpan dan tutup berkas.

      Terakhir, lihat lagi index.html di peramban. Jika kita mengklik draggable <div> dan menyeretnya di layar, akan ada indikasi visual yang bergerak.

      Nilai asali untuk atribut draggable adalah auto. Artinya, perilaku asali peramban Anda akan menentukan apakah elemen dapat diseret atau tidak. Biasanya, ini berarti pemilihan teks, gambar, dan tautan dapat diseret tanpa menetapkan draggable="true".

      Kini Anda memiliki berkas HTML dengan elemen yang dapat diseret. Kita lanjutkan dengan menambahkan penangan onevent.

      Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript

      Saat ini, jika kita melepaskan mouse saat menyeret elemen yang dapat diseret, tidak ada yang terjadi. Untuk memicu tindakan pada penyeretan atau peletakan di elemen DOM, kita perlu menggunakan Drag and Drop API:

      • ondragstart: Penangan kejadian ini akan dipasang ke elemen draggable kita dan aktif bila ada kejadian dragstart.
      • ondragover: Penangan kejadian ini akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian dragover.
      • ondrop: Penangan kejadian ini juga akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian drop.

      Catatan: Seluruhnya ada delapan penangan kejadian: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, dan ondrop. Untuk contoh, kita tidak akan memerlukan semuanya.

      Pertama, mari kita merujuk berkas script.js baru dalam index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Selanjutnya, buat berkas script.js yang baru:

      Objek DataTransfer akan terus melacak informasi terkait penyeretan yang terjadi saat ini. Untuk memperbarui elemen kita saat menyeret dan meletakkan, kita perlu mengakses langsung objek DataTransfer. Caranya, kita dapat memilih properti dataTransfer dari DragEvent elemen DOM.

      Catatan: Objek DataTransfer secara teknis dapat melacak informasi untuk beberapa elemen yang sedang diseret secara bersamaan. Untuk contoh, kita akan fokus pada penyeretan satu elemen.

      Metode setData objek dataTransfer dapat digunakan untuk mengatur informasi status penyeretan pada elemen yang diseret saat ini. Dibutuhkan dua parameter:

      • string yang mendeklarasikan format parameter kedua
      • data sebenarnya yang ditransfer

      Tujuan kita adalah memindahkan elemen draggable ke elemen induk baru. Kita harus dapat memilih elemen draggable dengan id unik. Kita dapat mengatur id elemen yang diseret dengan metode setData sehingga dapat digunakan nanti.

      Mari kita tinjau kembali berkas script.js dan membuat fungsi baru untuk menggunakan setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Catatan: Internet Explorer 9 hingga 11 dilaporkan mengalami masalah saat menggunakan 'text/plain'. Formatnya harus 'text' untuk peramban itu.

      Untuk memperbarui penataan gaya CSS item yang diseret, kita dapat mengakses gayanya menggunakan kejadian DOM lagi dan mengatur gaya apa pun yang kita inginkan untuk currentTarget.

      Mari kita tambahkan ke fungsi dan ubah backgroundColor menjadi yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Catatan: Gaya yang Anda ubah perlu diperbarui lagi secara manual saat peletakan jika Anda ingin gaya seret-saja. Jika Anda mengubah sesuatu saat mulai menyeret, elemen yang diseret akan mempertahankan gaya baru itu kecuali jika Anda mengubahnya kembali.

      Sekarang, kita memiliki fungsi JavaScript untuk saat penyeretan dimulai.

      Kita dapat menambahkan ondragstart ke elemen draggable di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Lihat index.html di peramban Anda. Jika Anda mencoba menyeret item sekarang, penataan gaya yang dideklarasikan dalam fungsi kita akan diterapkan:

      Gif beranimasi yang menggambarkan elemen yang diseret tetapi tidak diletakkan

      Namun, tidak akan terjadi apa pun saat Anda melepaskan klik.

      Penangan kejadian selanjutnya yang akan terpicu dalam urutan ini adalah ondragover.

      Perilaku peletakan asali untuk elemen DOM tertentu seperti <div> di peramban biasanya tidak menerima peletakan. Perilaku ini akan mencegat perilaku yang berusaha kita implementasikan. Untuk memastikan kita mendapatkan perilaku peletakan yang diinginkan, kita akan menerapkan preventDefault.

      Mari kita kembali ke berkas script.js dan membuat fungsi baru untuk menggunakan preventDefault. Tambahkan kode ini ke akhir berkas:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Sekarang, kita dapat menambahkan ondragover ke elemen dropzone di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Di titik ini, kita masih belum menulis kode yang menangani peletakan sesungguhnya. Penangan kejadian akhir yang akan terpicu dalam urutan ini adalah ondrop.

      Mari kita kembali ke berkas script.js dan membuat fungsi baru.

      Kita dapat merujuk data yang kita simpan sebelumnya dengan metode setData objek dataTransfer. Kita akan menggunakan metode getData objek dataTransfer. Data yang kita atur adalah id, jadi itulah yang akan dikembalikan kepada kita:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Pilih elemen draggable dengan id yang kita ambil:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Pilih elemen dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Tambahkan elemen draggable ke dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Atur ulang objek dataTransfer kita:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Sekarang, kita dapat menambahkan ondrop ke elemen dropzone di index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Setelah itu selesai, kita memiliki fitur seret-dan-letakkan lengkap. Lihat index.html di peramban Anda dan seret elemen draggable ke dropzone.

      Gif beranimasi yang menggambarkan elemen yang diseret dan diletakkan ke dalam target peletakan

      Contoh kita menangani skenario dari item tunggal yang dapat diseret dan target peletakan tunggal. Anda dapat memiliki beberapa item yang dapat diseret, beberapa target peletakan, dan menyesuaikannya dengan semua penangan kejadian Drag and Drop API lainnya.

      Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret

      Berikut ini satu lagi contoh cara menggunakan API ini: daftar agenda berisi beberapa tugas yang dapat diseret yang dapat Anda pindahkan dari kolom "To-do" ke kolom "Done".

      Gif beranimasi yang menggambarkan beberapa tugas To-do yang diseret dan diletakkan ke dalam kolom Done

      Untuk membuat daftar agenda sendiri, tambahkan lagi elemen yang dapat diseret dengan id unik ke index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Lihat index.html di peramban Anda dan seret item di kolom To-do ke kolom Done. Anda telah membuat aplikasi agenda dan menguji fungsionalitasnya.

      Kesimpulan

      Dalam artikel ini, Anda telah membuat aplikasi agenda untuk mendalami fungsionalitas seret-dan-letakkan yang tersedia di peramban web modern.

      Drag and Drop API menyediakan beberapa opsi untuk menyesuaikan tindakan Anda selain menyeret dan meletakkan. Misalnya, Anda dapat memperbarui penataan gaya CSS item yang diseret. Selain itu, alih-alih memindahkan item, Anda dapat menyalin item yang dapat diseret agar direplikasi saat peletakan.

      Ingatlah bahwa walaupun banyak peramban web yang mendukung teknologi ini, Anda mungkin tidak dapat bergantung padanya jika audiens Anda terdiri dari perangkat yang tidak mendukung fungsionalitas ini.

      Untuk mempelajari lebih lanjut tentang semua yang dapat Anda letakkan dengan Drag and Drop API, lihat dokumentasi MDN tentang hal itu.



      Source link

      Cara Menggunakan EJS untuk Membuat Templat Aplikasi Node


      Pengantar

      Saat membuat aplikasi Node secara cepat, kadang-kadang diperlukan cara mudah dan cepat untuk membuat templat aplikasi kita.

      Jade hadir sebagai mesin tampilan untuk Express secara asali, tetapi sintaks Jade dapat menjadi terlalu rumit untuk banyak kasus penggunaan. EJS adalah satu alternatif yang melakukan pekerjaan itu dengan baik dan sangat mudah disiapkan. Mari kita lihat cara membuat aplikasi sederhana dan menggunakan EJS untuk memasukkan bagian situs kita yang dapat diulang (potongan) dan menyalurkan data ke tampilan.

      Menyiapkan Aplikasi Demo

      Kita akan membuat dua halaman untuk aplikasi, satu halaman dengan lebar penuh dan yang satu lagi dengan bilah samping.

      Dapatkan kode: Anda dapat menemukan git repo kode demo lengkap di GitHub, di sini

      Struktur Berkas

      Inilah berkas yang akan kita perlukan untuk aplikasi kita. Kita akan membuat templat dari dalam folder tampilan dan selebihnya adalah praktik Node yang cukup standar.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json akan menyimpan informasi aplikasi Node dan dependensi yang kita perlukan (express dan EJS). server.js akan menyimpan konfigurasi dan penyiapan server Express. Kita akan mendefinisikan rute ke halaman kita di sini.

      Penyiapan Node

      Mari kita masuk ke berkas package.json dan menyiapkan proyek kita di sana.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Kita cuma perlu Express dan EJS. Sekarang kita harus menginstal dependensi yang baru saja kita definisikan. Lanjutkan dan jalankan:

      Dengan semua dependensi yang telah diinstal, mari kita konfigurasi aplikasi untuk menggunakan EJS dan menyiapkan rute untuk dua halaman yang kita perlukan: halaman indeks (lebar penuh) dan halaman about (bilah samping). Kita akan melakukannya semua dalam berkas server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Di sini kita mendefinisikan aplikasi dan mengaturnya untuk ditampilkan di porta 8080. Kita juga harus menjadikan EJS sebagai mesin tampilan untuk aplikasi Express menggunakan app.set('view engine','ejs;. Perhatikan cara kita mengirim tampilan kepada pengguna dengan res.render(). Perlu diperhatikan bahwa res.render() akan mencari tampilan di folder tampilan. Jadi kita hanya perlu mendefinisikan pages/index karena jalur lengkapnya adalah views/pages/index.

      Memulai Server kita

      Lanjutkan dan mulai server menggunakan:

      Sekarang kita dapat melihat aplikasi dalam browser di http://localhost:8080 dan http://localhost:8080/about. Aplikasi kita sudah siap dan kita harus mendefinisikan berkas tampilan dan melihat cara kerja EJS di sana.

      Buat Potongan EJS

      Seperti banyak aplikasi yang kita buat, akan ada banyak kode yang digunakan kembali. Kita akan memanggil potongan itu dan mendefinisikan tiga berkas yang akan kita gunakan di seluruh bagian situs kita: head.ejs, header.ejs, dan footer.ejs. Mari kita buat berkas-berkas itu sekarang.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Menambahkan Potongan EJS ke Tampilan

      Sekarang potongan kita telah didefinisikan. Kita tinggal memasukkannya dalam tampilan. Mari kita masuk ke dalam index.ejs dan about.ejs serta menggunakan sintaks include untuk menambahkan potongan tersebut.

      Sintaks untuk Memasukkan Potongan EJS

      Gunakan <%- include('RELATIVE/PATH/TO/FILE') %> untuk menyematkan potongan EJS di berkas lain.

      • Tanda hubung <%- daripada cuma <% untuk memberi tahu EJS agar merender HTML mentah.
      • Jalur ke potongan itu relatif terhadap berkas saat ini.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Sekarang kita dapat melihat tampilan yang didefinisikan dalam browser di http://localhost:8080. node-ejs-templating-index

      Untuk halaman about, kita juga menambahkan bilah samping bootstrap guna memeragakan cara menstrukturkan potongan untuk digunakan kembali di seluruh bagian templat dan halaman yang berbeda.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Jika kita mengunjungi http://localhost:8080/about, kita dapat melihat halaman about dengan bilah samping! node-ejs-templating-about

      Sekarang kita dapat mulai menggunakan EJS untuk menyalurkan data dari aplikasi Node ke tampilan kita.

      Menyalurkan Data ke Tampilan dan Potongan

      Mari kita definisikan beberapa variabel dasar dan daftar yang harus disalurkan ke halaman beranda kita. Kembalilah ke berkas server.js dan tambahkan yang berikut ini di dalam rute app.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Kita telah membuat daftar bernama mascots dan string sederhana bernama tagline. Mari kita masuk ke berkas index.ejs dan menggunakannya.

      Merender Variabel Tunggal di EJS

      Untuk menggemakan variabel tunggal, kita cukup menggunakan <%= tagline %>. Mari kita tambahkan ini ke berkas index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Mengulang-ulang Data di EJS

      Untuk mengulang-ulang data, kita akan menggunakan .forEach. Mari kita tambahkan ini ke berkas tampilan:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Sekarang kita dapat melihat informasi baru yang telah ditambahkan di browser!

      node-ejs-templating-rendered

      Menyalurkan Data ke Potongan di EJS

      Potongan EJS memiliki akses ke semua data yang sama seperti tampilan induk. Namun, berhati-hatilah: Jika Anda merujuk variabel di potongan, perlu didefinisikan di setiap tampilan yang menggunakan potongan atau akan dihasilkan kesalahan.

      Anda juga dapat mendefinisikan dan menyalurkan variabel ke potongan EJS dalam sintaks include seperti ini:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Namun, sekali lagi, Anda perlu berhati-hati ketika berasumsi variabel telah didefinisikan.

      Jika Anda ingin merujuk variabel di potongan yang mungkin tidak selalu didefinisikan, dan memberinya nilai asali, Anda dapat melakukannya seperti ini:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      Dalam baris di atas, kode EJS merender nilai variant jika telah didefinisikan, dan default jika tidak.

      Kesimpulan

      EJS memungkinkan kita untuk menjalankan aplikasi secara cepat saat kita tidak membutuhkan sesuatu yang terlalu rumit. Dengan menggunakan potongan dan memiliki kemampuan menyalurkan variabel ke tampilan, kita dapat membuat aplikasi yang bagus dengan cepat.

      Untuk referensi lainnya tentang EJS, lihat dokumentasi resmi di sini.



      Source link