Persiapan Proyek Latihan

Sebelum melanjutkan ke materi selanjutnya, dalam pembelajaran kali ini Anda akan membangun aplikasi web sederhana yang berfungsi untuk menampilkan, menambah, mengubah daftar buku.
2020031323085174e5859671d6a570d425ec2cd2067bdf.gif
Untuk itu mari kita persiapkan terlebih dahulu project starter-nya. Silakan unduh proyek awalnya pada tautan berikut: DicodingBooks. download
Setelah mengunduhnya, silakan ekstrak folder tersebut pada lokasi yang Anda inginkan. Di sini kita mencontohkan pada C -> Users -> Dicoding -> Desktop .
20200313230922c6e2ae6e7051445cef3959ae5fa83220.png
Setelah berhasil Anda ekstrak, maka pada lokasi yang ditentukan akan terdapat folder dengan nama “DicodingBooks”.
20200313230959a9dc006c2aa1e3ef48596b3b4d85e3b2.png
Buka folder proyek tersebut menggunakan code editor Anda. Lalu pada terminal (yang dibuka pada folder proyek) tuliskan perintah:


  1. npm install


Perintah tersebut berfungsi untuk memasang seluruh package yang terdapat di devDependencies dan dependencies pada berkas package.json. Setelah proses memasang package telah selesai, akan terbentuk folder node_modules pada proyek Dicoding Books.
20200313231044fe4854e09b0bc57806d2a415b06d5d00.png
Seperti yang sudah kita pelajari pada modul sebelumnya, proyek ini menggunakan webpack dengan konfigurasi sama seperti yang sudah kita pelajari. Untuk menjalankan proyek pada local server, kita tuliskan perintah berikut pada terminal.


  1. npm run start-dev


Buka browser dan arahkan ke alamat localhost:8080. Maka proyek Dicoding Books akan tampil pada browser.
202003132311222bed90bf92592d75d973c5b0067783ab.png
Ini merupakan proyek awal sehingga ia belum berfungsi sebagaimana dicontohkan pada gambar gif sebelumnya. 
Jika kita lihat pada source code yang ada di dalam proyek tersebut, tepatnya pada berkas src -> script -> main.js. Di sana kita bisa melihat fungsi kosong.
  1. function main() {
  2.  
  3.     const getBook = () => {
  4.         // tuliskan kode di sini!
  5.     };
  6.  
  7.  
  8.     const insertBook = (book) => {
  9.         // tuliskan kode di sini!
  10.     };
  11.  
  12.     const updateBook = (book) => {
  13.         // tuliskan kode di sini!
  14.     };
  15.  
  16.     const removeBook = (bookId) => {
  17.         // tuliskan kode di sini!
  18.     };
  19.  
  20. ……..
  21. }
  22.  
  23. export default main;
Nah tugas kita nanti adalah melengkapi fungsi yang tersebut hingga proyek Dicoding Book dapat berfungsi seperti yang diharapkan.
Kita juga bisa lihat kode lainnya pada main.js, seperti kode ini:
  1. /*
  2.         jangan ubah kode di bawah ini ya!
  3. */
  4.  
  5.     const renderAllBooks = (books) => {
  6.         const listBookElement = document.querySelector(“#listBook”);
  7.         listBookElement.innerHTML = “”;
  8.  
  9.         books.forEach(book => {
  10.             listBookElement.innerHTML += `
  11.                
  12.                    
  13.                        
  14.                            
    (${book.id}) ${book.title}

  15.                            

    ${book.author}

  16.                             Hapus
  17.