Terapkan Aplikasi Daftar Tugas Pertama Anda: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Jika Anda benar-benar baru dalam pengkodean atau memiliki beberapa pengkodean latar belakang, Anda mungkin bertanya-tanya dari mana harus mulai belajar. Anda perlu mempelajari bagaimana, apa, di mana membuat kode dan kemudian, setelah kode siap, bagaimana menerapkannya untuk dilihat secara keseluruhan.

Nah, kabar baiknya adalah coding itu tidak sulit.

Target Audiens: Tutorial ini ditujukan untuk pemula yang ingin memulai karir dalam pengembangan web, memiliki pemahaman tentang teknologi web secara umum.

Waktu Pembuatan: 90 Menit.

Kesulitan: Mudah.

Langkah 1: Apa yang Akan Kami Bangun?

Pada akhir tutorial ini kita akan:

• Buat Aplikasi Web To-Do List sederhana menggunakan HTML5.
• Integrasikan Bootstrap dengan aplikasi kami untuk menambahkan tampilan yang bagus dan gaya yang cepat.
• Gunakan pustaka JavaScript dan JQuery untuk menambahkan beberapa perilaku dinamis ke aplikasi kita.
• Terapkan aplikasi kami di cloud menggunakan Ziet/sekarang.

Beraksi:

Langkah 2: Pengenalan HTML, Bootstrap, JavaScript & JQuery

Apa itu HTML?

Hyper Text Markup Language (HTML) dapat dianggap sebagai "bahasa internet". HTML adalah bahasa markup standar yang digunakan untuk membuat halaman web. Ini awalnya dirancang untuk berbagi dokumen ilmiah. Adaptasi terhadap HTML selama bertahun-tahun membuatnya cocok untuk menggambarkan beberapa jenis dokumen lain yang dapat ditampilkan sebagai halaman web di internet.

Satu-satunya persyaratan yang diperlukan untuk menampilkan halaman HTML adalah browser web, seperti Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, atau Apple Safari.

Apa itu Bootstrap?

Bootstrap adalah kerangka kerja HTML, CSS, dan JavaScript paling populer untuk membangun situs web seluler pertama yang responsif. Bootstrap adalah proyek open source yang dikembangkan oleh Twitter. ini terdiri dari kelas CSS yang dapat diterapkan ke elemen untuk menatanya secara konsisten dan kode JavaScript yang melakukan peningkatan tambahan.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk pemrograman sisi klien dalam aplikasi web. Kode JavaScript dijalankan oleh browser dan memungkinkan pemrogram aplikasi web untuk membangun konten web dinamis, seperti komponen yang ditampilkan atau disembunyikan secara dinamis, mengubah tampilan, dan memvalidasi input pengguna.

Apa itu JQuery?

JQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur, membuat hal-hal seperti traversal dokumen HTML, dan manipulasi, penanganan acara, animasi jauh lebih sederhana.

Semua kekuatan JQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript, sangat penting untuk memahami, menyusun, dan men-debug kode Anda.

Untuk lebih jelasnya:

HTML

JavaScript

JQuery

Bootstrap

Langkah 3: Halaman Pertama Anda Dengan HTML

LANGKAH1: buat folder baru:

mkdir simple-todolist

LANGKAH2: buat file baru di dalam folder simple-todolist dan beri nama index.html.

cd simple-todolist

sentuh index.html

LANGKAH3: tambahkan kode berikut ke index.html.

To-Do-List

Daftar Tugas Saya

LANGKAH4: Buka index.html di browser Anda.

Anda akan melihat My To-Do-List ditampilkan (lihat foto di atas).

Langkah 4: Menambahkan Bootstrap

Di bagian ini kami akan menambahkan dukungan Bootstrap ke halaman index.html kami, untuk menambahkan gaya yang cepat dan bagus ke Aplikasi To-Do List.

Pemberitahuan: Dalam aplikasi ini kami akan menggunakan Bootstrap 3, Anda menggunakan kerangka kerja CSS lainnya, seperti UI Semantik.

LANGKAH1: tambahkan file CSS Bootstrap di tag kepala:

LANGKAH2: tambahkan file skrip Bootstrap dan JQuery CDN di akhir tag tubuh:

LANGKAH3: Buka index.html di browser Anda.

Selamat, kami berhasil menambahkan dukungan Bootstrap ke halaman kami dalam beberapa langkah.

Langkah 5: Lengkapi UI

Setelah kami berhasil menambahkan dukungan Bootstrap ke aplikasi kami. Sekarang mari kita bersaing dengan UI (Antarmuka Pengguna) untuk memungkinkan pengguna menambahkan tugas baru. Daftar To-Do akan dapat menambahkan item baru ke daftar, serta menghapus item yang ada.

LANGKAH1: tambahkan kode berikut ke index.html.

Tambahkan Tugas Baru Tambahkan Hapus Semua!

Daftar Tugas Saya

LANGKAH2: buka file index.html di browser Anda.

Langkah 6: Menambahkan Logika ke Aplikasi

Saat Anda memasukkan nama tugas dan mengklik tombol Tambah, tidak ada yang terjadi saat ini. Mari kita perbaiki itu.

Pada akhir langkah ini kita akan mengubah index.html kita menjadi halaman dinamis, sehingga akan berperilaku untuk interaksi pengguna.

LANGKAH1: buat folder baru di dalam simple-todolist, beri nama js dan beri nama file baru script.js di dalam folder itu:

mkdir js

cd js sentuh script.js

LANGKAH2: tautkan script.js ke index.html dengan menambahkan kode berikut di akhir tag head:

LANGKAH3: tambahkan kode berikut ke file script.js

$(dokumen).siap(() => {

var tugas = 0 $("#removeAll").hide(); /* tambahkan pengendali tugas baru */ $("#add").on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { tugas +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* menghapus pengendali tugas unik */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); tugas -=1; $(this).parent.remove(); }); /* tampilkan tombol removeAll ketika kita memiliki lebih dari 3 tugas */ if(tugas > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); tugas = 0; $("#removeAll").hide(); }); } }); });

  Catatan: Anda bisa mendapatkan kloning atau mengunduh kode ZIP dari repositori GitHub saya, ini akan menyelamatkan Anda dari penyadapan.

  git clone github.com/ahmnouira/simple-todolist

  LANGKAH4: uji kodenya

  Buka browser Anda dan masukkan tugas lalu klik Tambah, Anda akan melihat tugas baru ditambahkan ke daftar, jika Anda menambahkan 3 tugas, Anda akan melihat bahwa tombol hapusSemua muncul, tombol ini memungkinkan kami untuk menghapus semua tugas yang ditambahkan, Anda juga dapat menghapus hanya satu tugas beli dengan mengklik tombolnya.

  Langkah 7: (Opsional) Terapkan Aplikasi

  

  Sejauh ini kami membangun aplikasi daftar tugas sederhana, sekarang saatnya untuk menerapkannya di cloud dan berbagi pekerjaan kami dengan orang lain di seluruh dunia.

  Untuk mencapai ini kita akan menggunakan platform cloud yang disebut ZEIT Now.

  Apa itu ZEIT Sekarang?

  ZEIt Now adalah platform cloud untuk situs statis dan Fungsi Tanpa Server, memungkinkan pengembang untuk meng-host situs web dan layanan web yang disebarkan secara instan, semua ini tanpa konfigurasi.

  1. Instal Sekarang CLI

  Untuk menyebarkan dengan ZEIT Now, Anda perlu menginstal Now CLI.

  penting: Pastikan Anda telah menginstal npm.

  npm -v # periksa apakah npm install

  npm install -g now@latest # instal versi terakhir Now CLI secara global sekarang -v # chech jika Now CLI terinstal dan cetak versinya

  2. Sebarkan

  Yang harus Anda lakukan adalah pindah ke direktori dan kemudian menyebarkan aplikasi Anda dengan satu perintah:

  sekarang --prod # menyebarkan aplikasi

  Setelah diterapkan, Anda akan mendapatkan URL pratinjau yang ditetapkan pada setiap penerapan untuk membagikan perubahan terbaru di bawah alamat.

  aplikasi saya:

  Langkah 8: Kesimpulan

  Itu saja!

  Jangan ragu untuk menjelajahi kode dengan mengatur fitur baru dan memperluas aplikasi, dan berbagi pengalaman dan pertanyaan Anda di area komentar.

  Untuk melihat lebih banyak karya saya, silakan kunjungi open source saya di GitHub.

  myYouTube.

  myLinkedIn

  Terima kasih telah meluangkan waktu untuk membaca instruksi saya ^^.

  Semoga harimu menyenangkan.

  Ahmad Nouira