CRITICAL BOOK REVIEW

PEMROGRAMAN WEB
PRODI S1 PTIK - FT

CRITICAL BOOK REVIEW Skor nilai:

Dosen Pengampu : Martiano, M. Kom.

Mata Kuliah : Pemrograman Web

Disusun Oleh :

Kelompok 5

Ariandi Yoel Sitepu (5171151002)

Arya Umbu Orahu Zebua (5173151009)

Muhammad Faris Muhadriyan (5171151012)

Nuriati July (5172151005)

Ruslan Agung Gumelar (5171151017)

Sinthia Delan Situmorang (5172151006)

Zaidan Herfana Hamdany (5172151011)

UNIVERSITAS NEGERI MEDAN

FAKULTAS TEKNIK
PRODI PENDIDIKAN TEKNOLOGI INFORMATIKA DAN KOMPUTER
2019
 KATA PENGANTAR

Puji syukur kami panjatkan terhadap tuhan yang maha esa karena dengan
rahmat,karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan Critical Book
Review tentang buku utama Creating web Pages For dummies dengan buku pembanding
Web Aplications with Elm.dengan baik meskipun banyak kekurangan didalamnya. Dan juga
kami berterima kasih pada Bapak Martiano M.Kom selaku dosen Mata Kuliah
Pemograman Web yang telah memberikan tugas ini kepada kami.

kami sangat berharap Critical Book Review ini dapat berguna dalam rangka menambah
wawasan serta pengetahuan,kami juga menyadari sepenuhnya bahwa didalam critical book
review ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu,kami berharap
ada kritik,saran dan usulan demi perbaikan critical book review yang akan kami buat dimasa
yang akan datang,mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun.

Semoga Critical Book Review ini dapat dipahami bagi siapapun yang membacanya.
Sekiranya laporan yang disusun dapat berguna bagi kami sendiri maupun orang yang
membacanya. Sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata yang
kurang berkenan. Kami mohon kritik dan saran yang membangun dari anda demi perbaikan
critical book review ini diwaktu yang akan datang.

Medan , 10 Maret 2019

Penyusun

i
 DAFTAR ISI

Kata Pengantar ................................................................................................................ i

Daftar Isi .......................................................................................................................... ii

BAB I. PENDAHULUAN ............................................................................................... 1

A. Rasionalisasi CBR ................................................................................................ 1

B. Tujuan CBR .......................................................................................................... 2
C. Manfaat CBR ........................................................................................................ 2
D. Identitas Buku Yang Direview.............................................................................. 2

BAB II. ISI BUKU .......................................................................................................... 3

A. Buku A .................................................................................................................. 3
B. Buku B ................................................................................................................ 14

BAB III. PEMBAHASAN ............................................................................................ 28

A. Perbandingan buku A dan buku B ...................................................................... 28

B. Kelebihan dan Kekurangan kedua buku ............................................................. 28

BAB IV. PENUTUP ...................................................................................................... 30

A. Kesimpulan ......................................................................................................... 30
B. Saran ................................................................................................................... 30

DAFTAR PUSTAKA .................................................................................................... 31

ii
 BAB I

PENDAHULUAN

A. LATAR BELAKANG

Critikal book review merupakan tugas yang mengharuskan mahasiswa dalam melihat,
menganalisa, dan menilai sebuah buku dalam segi penampilan, penulisan, isi, dan aspek tata
bahasa buku tersebut. Dalam menilai sebuah buku, diperlukan sebuah pembanding untuk
melihat perbandingan buku yang direview dengan buku yang menjadi pembanding. Buku
yang akan direview terlebih dahulu dibandingakan dengan buku lain atau buku pembanding.
Proses membandingkan ini, akan membantu kita melihat isi buku berdasarkan kekurangan
dan kelebihan suatu buku dan berdasarkan kriteria tertentu. Sehingga pembaca dapat
menyimpulkan isi buku yang tepat untuk digunakan berdasarkan kebutuhannya. Pembaca
akan lebih mudah memahami dan menyimak dengan baik hasil review sebuah buku agar
lebih cepat dan efektif untuk mendapatkan informasi dari sebuah buku.

Mengkritik buku dilakukan bukan untuk menjatuhkan atau menaikkan nilai suatu buku
melainkan untuk menjelaskan apaa danya suatu buku yaitu kelebihan atau kekurangannya
yang akan menjadi bahan pertimbangan atau ulasan tentang sebuah buku kepada pembaca
perihal buku-buku baru dan ulasan kelebihan maupun kekurangan buku tersebut. Yang lebih
jelasnya dalam mengkritik buku, kita dapat menguraikan isi pokok pemikiran pengarang dari
buku yang bersangkutan diikuti dengan pendapat terhadap isi buku. Uraian isi pokok buku
memuat ruang lingkup permasalahan yang dibahas pengarang, cara pengarang menjelaskan
dan menyelesaikan permasalahan, konsep dan teori yang dikembangkan, serta kesimpulan.

Dengan demikian laporan buku atau resensi sangat bermanfaat untuk mengetahui isi
buku selain itu, akan tahu mengenai kekurangan dan kelebihan dari isi buku yang telah
dibaca. Untuk itu, kami harapkan kepada pembaca agar mengetahui dan memahami
mengenai laporan buku atau resensi sehingga dapat menilai isi buku tersebut dengan baik dan
bukan hanya sekedar membaca sekilas buku tersebut melainkan dapat memahami apa yang
ada dalam buku tersebut secara mendalam.

1
B. TUJUAN
a. Untuk mengetahui isi tiap bab pada buku utama Creating web Pages For dummies
dengan buku pembanding Web Aplications with Elm.
b. Untuk mengetahui setiap isi dalam buku tersebut

C. MANFAAT
a. Dituntut untuk membaca beberapa buku tersebut secara teliti. Dari situ kita dapat
melihat perbandingan beberapa buku tersebut. Secara tidak langsung pengetahuan kita
terhadap materi yang kita bahasakan bertambah.
b. Kita jadi mampu menganalisis buku, karena dengan meresensi suatu buku, kita dapat
juga mengetahui kelebihan dan kekurangan buku tersebut sekaligus memberikan
masukan.
c. Kita menganalisi setiap satu bab pada buku ini bertujuan menambah wawasan yang
mengcritical maupun pembaca selanjutnya.

D. INDETITAS BUKU

Buku A

Judul : Creating Web pages For Dummies

Penulis : Bud E.Smith dan Arthur bebak

Penerbit : Wiley Publishing,Inc

ISBN : 0-7645-7327-6

Buku B

Judul :Web Aplications With Elm

Penulis : Wolgang loder dan Vienna Austria

Penerbit : Apress

ISSN :13 (electronic) 978-4842-2610-0

2
 BAB II
RINGKASAN ISI BUKU

BUKU REVIEW (Buku A)

CREATING WEB PAGES FOR DUMMIES

“Bud E Smith and Arthur Bebak”

BAB 1. Buat Web Halaman Hari Ini

Bagian 1 Dasar-Dasar Penerbitan Halaman Web

 Memahami cara kerja Web

Web, secara resmi disebut World Wide Web, adalah kumpulan dari sekelompok file
teks dan grafik (ditambah beberapa hal lain) yang membentuk halaman Web. dasar dari Web
adalah Internet. Web tergantung pada Internet untuk terhubung banyak file bersama-sama dan
untuk memungkinkan orang masuk ke Web. E-mail adalah fungsi terpisah yang juga
tergantung pada Internet. Web didefinisikan oleh dua spesifikasi: HyperText Transfer
Protocol (HTTP) dan HyperText Markup Language (HTML). Ide yang mendasarinya di
belakang Web adalah hypertext - teks yang dapat berisi tautan ke bagian lain dari teks
disimpan di mana saja di Internet. Web mendapatkan namanya dari caranya semua tautan
menghubungkan potongan-potongan teks bersama-sama seperti web laba-laba besar.

 Istilah web yang perlu diketahui

Halaman web: Dokumen teks yang diterbitkan di server Web, memiliki tag HTML di
dalamnya, hampir selalu menyertakan tautan hiperteks, dan biasanya termasuk grafik. Ketika
Anda mengklik Kembali di browser Web Anda, Anda pindah ke halaman Web sebelumnya
yang Anda kunjungi Situs web: Kumpulan halaman Web itu berbagi tema dan tujuan
bersama dan yang biasanya diakses pengguna melalui beranda situs.Halaman Beranda:
Halaman Web yang biasanya diakses orang pertama kali dalam situs Web. Anda membiarkan
orang tahu URL (alamat) Anda beranda dan cobalah untuk mendapatkan halaman web
lainnya pembuat untuk memberikan tautan ke sana. Tag HTML: Perintah pemformatan atau
penautan singkat yang ditempatkan di dalam tanda kurung dalam teks file HTML. Misalnya,

3
tag <b> memberi tahu browser Web untuk menampilkan teks setelah perintah dalam huruf
tebal; tag </b> berubah menunggu. Lihat Bab 4 untuk lebih lanjut tentang HTML.

 HTML

Ketika Tim Berners-Lee menemukan HTML di CERN (fasilitas penelitian fisika

partikel Eropa) pada awal 1990-an, ia mungkin tidak pernah membayangkan bahwa begitu
banyak orang akan tertarik melihatnya. Saat ini, sebagian besar browser menyertakan
perintah yang memungkinkan Anda melihat HTML yang sebenarnya sumber yang membuat
halaman terlihat dan berfungsi seperti itu. Misalnya, di Internet Explorer, pilih Lihat➪
Sumber untuk melihat file HTML yang mendasarinya. Kamu lihat semua tag HTML yang
membuat halaman Web lihat dan lakukan apa adanya. Setelah Anda membuka file HTML,
Anda dapat mengedit teks dan tag HTML, simpan file, lalu buka file lagi di browser Anda
untuk melihat caranya terlihat dengan perubahan HTML.

Bagian 2. Going Worldwide dengan GeoCities

 Dimulai dengan Halaman Web GeoCities

Memasang halaman Web pribadi menghasilkan banyak hal. Untuk satu, itu
menyenangkan. Jutaan orang telah mendapat dorongan nyata dari berbagi informasi tentang
diri mereka sendiri dan minat mereka dengan memasang halaman Web. Banyak Web pribadi
halaman yang awalnya dimulai cukup sederhana berkembang menjadi Web yang besar dan
populer situs berfokus pada topik dari setiap jenis yang bisa dibayangkan. Sebagai jumlah
pengguna Web meningkat, semakin banyak kolega, keluarga, dan teman Anda dapat melihat
Anda Halaman web, seperti dapat (tentu saja) jutaan dan jutaan orang asing. Membuat
halaman Web pribadi juga sangat berharga dalam membantu Anda mengetahuinya cara
mempublikasikan di Web. Sampai Anda mempublikasikan sesuatu di Web, Anda dapat
melakukannya temukan anggapan bahwa Anda sebenarnya dapat melakukannya dengan sulit
untuk dipercaya. Setelah kamu memasang halaman Web pertama Anda, Anda mungkin
menemukan gagasan bahwa apa pun dapat menghentikan Anda melakukannya lagi sulit
dipercaya! Keberhasilan awal bangun pribadi Anda Halaman web akan merambah ke semua
upaya Web masa depan Anda.

4
  Alat web versus layanan Web

Alat penerbitan Web, seperti Netscape Komposer, adalah program yang membantu
Anda mempersiapkan konten untuk Web. Layanan penerbitan Web adalah fungsi pendukung
yang menangani bagian dari proses penerbitan Web untuk Anda, seperti hosting halaman web
Anda di server. Web layanan penerbitan yang kami jelaskan di bab ini dan Bab 3 juga
termasuk alat online untuk mempersiapkan halaman web Anda, tetapi Web gratis layanan
hosting halaman yang mereka sediakan adalah yang paling banyak terkenal, jadi kami
menyebutnya sebagai layanan dari pada alat.

 GeoCities atau layanan online?

Jika Anda adalah pengguna layanan online seperti America Online, Anda memiliki opsi
untuk membuat halaman Web pribadi gratis di GeoCities, di situs Anda layanan online, atau
keduanya. Kami merekomendasikan itu pengguna layanan online menempatkan halaman
Web pertama mereka layanan online mereka. Mengapa? Alasan pertama dan terpenting
adalah dukungan. On line layanan adalah sumber bantuan yang bagus untuk semua jenis
masalah online, yang paling tidak mendapatkan halaman Web pertama Anda aktif dan
berjalan. Kamu bisa dengan mudah mendapatkan banyak bantuan dari sesama anggota Anda
dan dari personel pendukung Anda layanan online. Kedua adalah keakraban. Anda sudah
terbiasa dengan layanan online Anda. Anda lebih bisa untuk mengambil keuntungan dari
layanan gratis daripada layanan dalam jenis pengaturan lainnya, bahkan satu sebagai ramah
dan terbuka sebagai Geocities. Ketiga adalah komunitas. Layanan online mencoba
menumbuhkan rasa kebersamaan, seperti halnya Yahoo! Dengan Geocities. Jika Anda adalah
orang yang menghargai ini Perasaan, Anda mungkin sudah mengembangkannya dalam
layanan online Anda; Anda mungkin juga mengambil manfaatkan komunitas yang sudah
Anda miliki membayar untuk! Jadi, jika Anda adalah pengguna AOL, pertimbangkan untuk
pergi Bab 3 dan mengikuti instruksi untuk membuat dan meng-hosting halaman Web gratis.
Jika tidak, kamu tidak perlu bergabung dengan layanan online hanya untuk mendapatkan
layanan hosting Web gratis; GeoCities cepat, mudah, dan menyenangkan.

5
Bagian 3 Penerbitan Web Dengan AOL Dan ISP Lainnya

Meskipun World Wide Web yang mudah digunakan, terbuka, dan tidak dapat diatur
mungkin tampak seolah akan menghapus secara tradisional, tertutup, dipantau secara online
layanan seperti America Online (AOL), keadaan tidak benar-benar berfungsi keluar seperti
itu. Layanan online beradaptasi dengan cepat. Mereka telah menjadi gateway ke Web, dan
dalam beberapa kasus menawarkan layanan penerbitan Web yang mudah digunakan yang
mencakup hosting halaman Web Anda secara gratis. Jika Anda sudah menggunakan AOL, itu
mungkin tempat terbaik bagi Anda untuk mulai bereksperimen dengan penerbitan Web. Anda
sudah tahu antarmuka, Anda dapat menemukannya forum online dan papan diskusi untuk
penerbitan Web, dan Anda dapat mengambilnya keuntungan dari fitur penerbitan

Web yang mudah digunakan yang diacak AOL untuk menyediakan. Jika Anda bukan
pengguna America Online atau CompuServe, yang tercepat dan cara termurah untuk
mendapatkan halaman pertama Anda di Web adalah dengan menggunakan GeoCities, the
Layanan berbasis web yang kami jelaskan di Bab 2. Tetapi jika Anda melakukannya, Anda
mungkin saja lebih baik menggunakan layanan online Anda untuk penerbitan Web. America
Online, di khususnya, memiliki fitur kuat untuk penerbitan Web perantara, termasuk
dukungan untuk Windows dan Macintosh, beberapa megabita server gratis ruang, dan (pada
saat penulisan ini) tidak ada batasan untuk menggunakan Web gratis halaman untuk bisnis.

Bagian 4 Pengantar HTML

Mengetahui dasar-dasar HTML adalah memilih konten teks dari halaman Web Anda
dengan grafik, tautan, dan hal yang baik. HTML adalah kode yang dapat dilihat pengguna di
browser Web. Jika Anda tahu dasar-dasar HTML, Anda akan mengerti mengapa laman web
terlihat dan berfungsi sebagaimana mestinya, dan Anda akan memahami bagaimana Anda
dapat membuat dan meningkatkan halaman Web Anda sendiri. Mencoba mencari banyak
HTML segera adalah hal yang buruk. Menghabiskan berjam-jam dan jam memeriksa semua
detail HTML cenderung memperlambat pencarian Anda menjadi penerbit Web. Dan menjadi
penerbit Web dengan cepat dapat, sekali lagi, jadilah hal yang baik. Jadi jangan biarkan hal
buruk menghalangi hal-hal baik; Gunakan ini bab untuk mengetahui cukup banyak tentang
HTML untuk membantu Anda membuat beberapa dasar halaman dan mendapatkannya di
Web.

6
BAB 2 . BUILDING PAGES

Bagian 5 Choosing Your Tools

Anda dapat menggunakan alat online, seperti yang kita bahas dalam Bab 2 dan 3, untuk
membuat halaman Web awal Anda menggunakan templat. Namun, pada titik tertentu, Anda
akan ingin melangkah lebih jauh dengan halaman Web Anda daripada yang diizinkan oleh
templat. Untuk pergi di luar template, Anda harus menjauh dari alat daring dan membuat
halaman Web Anda sendiri di hard disk Anda sendiri. Kemudian Anda dapat mengunggah
halaman Web yang dicoba dan diuji ke sejumlah host Web yang berbeda, termasuk Yahoo!
Geocities dan AOL. Bab ini menjelaskan cara membuat halaman Web awal Anda secara
lokal, di hard disk sendiri. Beberapa bab berikutnya menjelaskan cara meningkatkan Web
Anda halaman dan cara memperluas halaman Web Anda ke situs Web multi-halaman. Bab 12
memberi tahu Anda cara menerbitkan satu atau lebih halaman Web yang Anda miliki sendiri
mesin ke Web.

 Memilih Antara WYSIWYG dan Teks Biasa

Anda dapat menggunakan beberapa pendekatan berbeda untuk membuat dan mengedit
halaman Web komputer Anda sendiri. Salah satu pendekatan adalah menggunakan editor
halaman Web WYSIWYG.WYSIWYG diucapkan “whizzywig,” dan merupakan singkatan
dari What You See Is What Anda mendapatkan. Editor halaman Web WYSIWYG seperti
program pengolah kata – apa yang Anda lihat di layar setidaknya mendekati apa yang Anda
dapatkan ketika Anda menerbitkan halaman Web Anda dan lihat secara online. Masalahnya
adalah WYSIWYG tidak berfungsi dengan baik di Web. Seperti yang kami jelaskan di Bab 4,
berbagai browser Web dapat menginterpretasikan hal yang sama Tag HTML berbeda. Juga,
pengguna dapat memiliki pengaturan browser yang berbeda, yang berarti halaman yang sama
dapat terlihat berbeda untuk pengguna yang berbeda. Ini variabilitas merusak upaya Anda
untuk membuat halaman Web Anda terlihat seperti itu. Untuk mengatasi masalah ini, dan
untuk membuat halaman Web yang berfungsi dengan baik di Internet jangkauan seluas
mungkin dari berbagai jenis komputer dan peramban yang berbeda versi dan pengaturan,
mengetahui apa yang terjadi dengan HTML yang mendasarinya sangat membantu.

7
 Karena alasan ini, banyak penerbit halaman Web bekerja secara langsung dengan tag
HTML. Lainnya bekerja dengan editor WYSIWYG, tetapi sering memeriksa seperti apa teks
tag-HTML yang mendasarinya - biasanya hanya disebut "HTML" - seperti. Kami
menyarankan Anda untuk bekerja secara langsung dalam HTML atau menggunakan alat
WYSIWYG sederhana yang tidak mencoba melakukan terlalu banyak untuk Anda, dan
sering melihat HTML yang mendasarinya. Jika Anda ingin menggunakan alat, kami sarankan
Netscape Komposer.

 Plus dan minus editor teks

Alasan yang mendukung pengeditan HTML secara langsung dalam editor teks cukup
sederhana. Anda bekerja secara langsung dalam HTML - tidak pernah apa pun. Anda selalu
melihat langsung di tag HTML. Kapan saja Anda ingin menambahkan fitur ke Web Anda
halaman, Anda dipaksa untuk mempelajari tag HTML untuk fitur itu dan menggunakannya,
yang berarti Anda secara bertahap mempelajari bahasa yang mendasari halaman Web.

Alasan untuk tidak bekerja secara langsung dalam HTML menggunakan editor teks
cukup sederhana demikian juga. Membayangkan seperti apa tampilan halaman Web Anda
cukup sulit ketika Anda hanya melihat teks dan tag. Anda dapat dengan mudah membuat
kesalahan di konstruksi halaman Web Anda ketika Anda bekerja secara langsung dengan tag
- dan mudah tersesat dalam melihat teks yang diberi tag HTML saat Anda mencoba ingat di
mana membuat penambahan atau perubahan.

 Bagaimana jika Anda menggunakan AOL atau Compuserve?

AOL dan CompuServe masing-masing memiliki Web bawaan browser yang berjalan di
dalam program, agak memperkeruh perbedaan antara layanan online sendiri dan Web terbuka
itu siapa pun dapat mengakses.Dulu jika Anda menjalankan AOL, Anda hanya bisa gunakan
browser Web yang ada di dalam program. Namun, dengan versi terbaru dari perangkat lunak
AOL,Anda dapat menjalankan browser Web biasa di samping perangkat lunak klien AOL.
(Anda sudah bisa melakukannya ini selama bertahun-tahun dengan CompuServe.) Kami
sarankan Anda menggunakan browser Web "asli" di sampingnya perangkat lunak klien AOL
atau CompuServe. Cukup instal versi Internet terbaru Perangkat lunak Explorer dan
Netscape. (Bab ini menjelaskan cara menginstal perangkat lunak Netscape; untuk petunjuk
umum tentang menginstal Internet Explorer, lihat bilah samping "Bagaimana jika Anda
membutuhkan IE?"nanti dalam bab ini.)

8
 Mulai perangkat lunak AOL atau CompuServe Anda dan terhubung dengan internet.
Kemudian mulailah Web Anda browser. (Anda bahkan dapat memulai satu browser, lalu
yang lain; versi terbaru dari IE dan Navigator keduanya dapat berjalan pada saat yang sama.)
Berikut ini Gambar menunjukkan AOL dan Internet Explorer berjalan pada waktu
bersamaan. Gunakan browser Web Anda untuk melihat di situs Web, termasuk untuk
menguji Web Anda sendiri situs sedang dikembangkan. Dan gunakan Netscape Komposer
untuk membuat halaman Web. Anda juga dapat menguji halaman Web yang sedang Anda
kembangkan di browser AOL atau CompuServe bawaan untuk memastikan Anda tidak
memiliki masalah. Namun, pengujian dengan AOL atau CompuServe kurang penting
daripada pengujian di browser IE atau Navigator, yang lebih banyak digunakan.

BAB 3 . Better, Stronger,Faster Pages

Membuat dan Menambahkan Web-Ready Graphics

Memiliki gambar sebagai bagian dari Web sepertinya menjadi pemenang yang jelas
sekarang — bagaimanapun juga, majalah dan surat kabar tidak akan berfungsi dengan baik
jika Anda menggunakan foto-foto, gambar, dan elemen desain halaman grafis kecil yang
memberikan masing-masing publikasi "tampilan." Bahkan, termasuk grafik di blog Anda
Halaman-halaman web merupakan strategi kemenangan yang menjadi salah satu penulis
buku ini (Bud Smith) telah ikut menulis volume pendamping untuk yang satu ini, Creating
Web Grafik Untuk Pangsit (Wiley). Anda dapat merujuk ke buku itu jika Anda membutuhkan
lebih banyak detail terkait grafis daripada yang Anda temukan di sini. Pada 1980-an dan 90-
an, sebelum Web, Internet hampir seluruhnya merupakan dunia textonly. Email, newsgroup
Usenet, dan forum layanan online semuanya lingkungan hanya teks, sebagian besar berjalan
pada sistem komputer yang hanya menggunakan teks UNIX dan DOS.Grafik membuat Web
lepas landas - dan mereka juga merupakan aspek yang paling sulit untuk mendapatkan
halaman Web Anda dengan benar. Anda dapat menggunakan grafik untuk menyampaikan
tema “Lihat dan rasakan,” untuk memberikan aksen pada bagian tertentu dari halaman Web,
atau bahkan untuk menyampaikan konten utama situs Web. Beberapa penggunaan grafis
diperlukan untuk adil tentang situs apa pun.

9
 Using GIF and JPEG graphics formats

Program grafik menyimpan file dalam format grafik miliknya – the pengaturan data
tertentu yang digunakan oleh program untuk menyimpan file-nya. Untuk Misalnya, program
grafis populer Photoshop menyimpan file di PSD format (untuk Dokumen Photoshop); Paint
Shop Pro, grafik populer lainnya Program, menyimpan file-file sebagai file PSP. (Coba tebak
apa artinya “psp”!) Web browser biasanya tidak tahu cara menampilkan file yang disimpan
dalam format ini.GIF, atau Graphics Interchange Format: Format file yang paling banyak
digunakan orang untuk bertukar sebagian besar gambar yang bukan foto. Semula
dipopulerkan oleh CompuServe, GIF menyebar ke layanan online lainnya dan kemudian ke
seluruh Internet, termasuk Web. Browser apa pun yang mendukung gambar mendukung GIF.

Gambar GIF dapat berisi hingga 256 warna, sehingga pemformatan GIF bekerja secara
efektif untuk gambar yang memiliki beberapa warna mulai dari beberapa warna hingga
beberapa ratus. warna. Sebagian besar gambar sederhana dan sebagian besar gambar yang
dibuat pada komputer jatuh dalam kategori ini. Jika suatu gambar memiliki lebih dari 256
warna, ia akan kehilangan sebagian informasi warna saat Anda mengonversi gambar ke GIF.
Anda harus melihat pada gambar sebelum dan sesudah Anda mengonversinya menjadi GIF
untuk melihat apakah konversi tersebut secara nyata memengaruhi tampilan gambar.

JPEG, atau format Kelompok Ahli Fotografi Bersama: Mengkompres gambar yang
kompleks, seperti foto, dengan banyak variasi warna. Ini kemampuan menjadikan JPEG
format gambar pilihan untuk menampilkan foto dan gambar tampak alami lainnya di halaman
Web Anda. (Apa membuat gambar terlihat alami adalah cara nuansa warna yang berbeda
muncul ketika cahaya jatuh secara berbeda pada berbagai bagian suatu objek.) Ini gambar
mempertahankan penampilan mereka dengan baik ketika dikompresi dengan JPEG.

10
 Ruang teks versus ruang grafis

File teks jauh lebih efisien untuk computer untuk menyimpan dan mentransmisikan di
seluruh jaringan daripada file gambar. Mengapa? Teks dikodekan dengan sangat ketat;Anda
dapat mengisi halaman Web biasa dengan teks padat menggunakan sekitar 1.500 karakter,
yang dapat direpresentasikan dalam 1.500 byte, atau 1,5KB, dari ruang. Grafik, di sisi lain,
membutuhkan banyak penyimpanan. Gambar satu halaman penuh, penuh warna
membutuhkan ruang sekitar 1,5MB - sekitar 1.000 kali lebih banyak ruang. File besar
membutuhkan waktu lama untuk mentransmisikan file Internet, membuat halaman web butuh
waktu lama untuk mengunduh. Jadi sebagian besar halaman Web terdiri dari banyak teks,
area ruang putih yang cukup besar, dan grafis kecil, sangat terkompresi. Halaman Web hanya
terdiri dari 2K file HTML yang membutuhkan waktu sekitar 1 kedua untuk mengunduh
melalui modem, tetapi membosankan. Grafik satu halaman penuh, penuh warna yang tidak
terkompresi membutuhkan waktu sekitar 12 menit, yang terlalu lama. Untuk
mentransmisikan dengan cepat, grafis Web terbaik berukuran kecil dan kemudian dikompresi
selanjutnya - terutama dengan menggunakan warna yang lebih sedikit. Grafik paket seperti
Adobe Photoshop memungkinkan Anda untuk menyimpan gambar dalam format
terkompresi, dengan jumlah warna yang lebih kecil digunakan untuk menyampaikan hamper
semua gambar asli. Itu sebabnya beberapa Web gambar terlalu kecil dan memiliki tepi jaggy.

Using Web-safe colors

Membuat halaman web Anda terlihat bagus di semua komputer di luar sana adalah
besar isu. Salah satu hal paling sulit yang perlu Anda perhatikan adalah masalah warna Web-
safe. Beberapa pengguna komputer memiliki sistem tampilan yang hanya mengizinkan apa
yang disebut Tampilan warna 8-bit, yang mendukung 256 warna, pada resolusi tetap, seperti
800 x 600. Hampir semua sistem komputer Windows dan Macintosh digunakan saat ini
mendukung resolusi dan palet warna dasar yang relatif rendah ini.

Komputer lain memiliki lebih banyak opsi. Mereka dapat menampilkan ribuan atau
bahkan jutaan warna. Dan mereka dapat menampilkan desktop komputer dalam resolusi yang
lebih tinggi - 1024 x 768 dan, semakin, 1280 x 1024 cukup umum. Beberapa komputer
mendukung resolusi yang lebih tinggi. Namun, biasanya, semakin tinggi resolusi berarti Anda
kehilangan pilihan untuk menampilkan banyak warna sekaligus seperti ketika Anda
menggunakan resolusi yang lebih rendah.

11
 Namun, bahkan sistem yang lebih mampu ini juga dapat berjalan pada 256 warna dan
Resolusi 800 x 600 - dan mereka menjalankan tercepat dalam mode ini. Jadi, banyak
pengguna yang menjalankan pada 256 warna dan resolusi 800 x 600 atau resolusi 1024 x 768
untuk selamanya. kinerja. Juga, beberapa program, seperti game, memaksa komputer masuk
salah satu penyiapan ini, dan jangan memberi tahu pengguna bahwa mereka melakukannya.
Mereka juga tidak mengembalikan pengaturan sebelumnya ketika pengguna kembali ke
Windows. Jadi, tanpa menyadarinya, pengguna dapat berjalan dalam resolusi yang lebih
rendah, dan dengan lebih sedikit warna, daripada komputer mereka mampu berjalan.

Standar untuk grafik

Browser Web terbaru dapat menampilkan tiga jenis data: teks dengan tag HTML,
gambar GIF, dan gambar JPEG. (Beberapa orang menyebut GIF sebagai "jiff," yang lain
sebagai "giff" seperti dalam "hadiah." Kami lebih suka "giff" seperti dalam "hadiah.") Web
yang khas browser menampilkan teks yang ditandai HTML dengan tepat, meskipun tidak
semua browser mengerti semua tag yang sama. Browser juga menampilkan GIF dan Grafis
JPEG sebaris - yaitu, tertanam dalam halaman Web. Halaman Web dengan inline grafis
terlihat seperti halaman di majalah, dengan teks dan gambar dicampur bersama menjadi satu.
Namun, setiap file grafik disimpan secara terpisah dari teks yang ditandai HTML yang
membentuk halaman Web yang mendasarinya. Ini membuat Web bekerja lebih baik secara
keseluruhan, tetapi berkontribusi pada beberapa masalah - seperti kesulitan menjaga semua
file Web Anda bersama untuk tampilan yang tepat - yang kami jelaskan nanti dalam bab ini.

Berurusan dengan Grafik

Aspek yang paling sulit dari memasukkan grafik di halaman Web Anda adalah
penyelesaian semua masalah desain yang menyertai penggunaan grafis. Menciptakan efektif
grafis dan menempatkannya dengan benar dalam kaitannya dengan teks Anda tidak semudah
air mendidih. Buku ini tidak mencakup semua kompleksitas desain grafis. Namun, kami
dapat memberi tahu Anda kekhawatiran tambahan yang muncul saat Anda menggunakannya
grafis di Web sehingga Anda dapat secara efektif menerapkan grafik Anda sendiri
keterampilan - atau keterampilan orang-orang yang bekerja dengan Anda - ke halaman Web
Anda.

12
 Menguji situs Anda

Segera setelah Anda mengaktifkan situs Anda, masuklah sebagai pengguna Web. Lihat
apakah situs tersebut bekerja. Uji semua tautan untuk memastikan bahwa tautan tersebut
menuju ke tempat yang seharusnya. Yakinkan Anda dapat dengan mudah berpindah antar
halaman. Coba akses situs Anda dari komputer dengan koneksi modem yang lambat untuk
melihat bagaimana situs dapat digunakan lebih lambat kecepatan. Coba juga menggunakan
situs Anda di Netscape dan Internet Explorer browser. Anda juga dapat mengujinya di
browser bawaan America Online, jika ada akses ke AOL.

Perhatikan juga bagaimana Anda akan bereaksi jika Anda adalah pengguna baru. Apa
yang terlihat situs suka untuk? Apakah situs memenuhi harapan ini? Apakah Anda
mengalami kesulitan atau kebingungan dalam menggunakannya? Pendekatan berpikiran
terbuka ini ke situs Anda sendiri dapat membantu Anda dengan cepat memperbaiki masalah
halus yang sulit diidentifikasi.Menguji situs Anda bisa sedikit frustasi karena Anda mungkin
menemukan semua jenisnya hal-hal untuk diperbaiki, tetapi jika Anda tindak lanjuti, Anda
berakhir dengan situs yang jauh lebih baik. Menjadi siap mencatat reaksi Anda sejak pertama
kali Anda masuk situs Anda hingga akhir kunjungan Anda - mengingat tayangan pertama
nanti adalah sulit.

Gunakan kemampuan Cetak browser Anda untuk mencetak semua halaman di situs
Web Anda, dan kemudian letakkan catatan Anda tepat di cetakan. Dapatkan umpan balik dari
orang lain siapa yang akan meluangkan waktu untuk melihat situs Anda. Hasil cetak
memungkinkan Anda dengan mudah melacak ide-ide Anda saat Anda mengikuti dan untuk
membuat perubahan yang benar itu pertama kali.

13
BUKU PEMBANDING (Buku B)

WEB APPLICATIONS WITH ELM

“FUNCTIONAL PROGRAMING FOR THE WEB”

“VIENNA AUSTRIA”

BAB 1. Pengantar
Pada 2012, versi pertama dari bahasa fungsional baru diterbitkan. Itu didasarkan pada
Haskell dan disebut Elm; itu disebutkan di sana-sini sebagai salah satu bahasa pemrograman
yang akan datang untuk web. Beberapa tahun kemudian, saya menemukan istilah
pemrograman reaktif. Pada saat itu Facebook's framework React menjadi hype terbaru, dan
kerangka kerja serupa bermunculan di ruang pengembangan antarmuka pengguna.
Antarmuka pengguna reaktif bukanlah hal yang baru — mereka diteliti sebelum antarmuka
grafis menjadi arus utama. Saya menjadi tertarik mengetahui lebih banyak tentang bagaimana
paradigma lama-dekade ini diterapkan pada antarmuka pengguna berbasis web modern. Satu
topik dan hasil pencarian mengarah ke yang lain, dan segera nama Evan Czaplicki1 muncul.
Dia telah menulis tesis tentang pemrograman reaktif fungsional (FRP) dan menciptakan
bahasa Elm untuk mengimplementasikan ide-ide dalam tesis. Pada tahap itu — tentang versi
0.14 — platform Elm sangat mendasar, tetapi banyak pengembang dapat melihat potensinya.
Penelitian saya tentang paradigma reaktif bertepatan dengan proyek yang saya lakukan pada
waktu itu, repositori aset digital. Implementasi back-end proyek adalah basis untuk buku
Erlang dan Elixir untuk Programer Imperatif.2 Proyek itu juga membutuhkan klien web, dan
saya berpikir: Betapa peluang yang baik untuk menggunakan Elm untuk proyek kehidupan
nyata!
Saya telah menggunakan Elm dalam beberapa proyek sekarang, sebagian besar di
antaranya aplikasi internal untuk perusahaan yang menghargai perputaran cepat dari desain
ke implementasi dan tidak perlu antarmuka pengguna yang boros dengan kerangka kerja gaya
terbaru. Apa yang mereka butuhkan, adalah aplikasi yang melakukan apa yang seharusnya
mereka lakukan tanpa kesalahan runtime pada waktu yang paling tidak nyaman. Dan Elm
menyampaikan hal itu.

14
TEORI
Sekalipun pencipta Elm mengatakan bahwa ini bukan tentang pemrograman reaktif
fungsional lagi, tetapi lebih pada konkurensi, patut untuk melihat sekilas sejarah ide reaktif
yang berasal dari tahun 1980-an. Semua program perangkat lunak berkaitan dengan skenario
berikut:
• Program komputer harus memproses aliran data.
• Data bergerak secara asinkron.
• Acara ditentukan oleh waktu dan data.
• Program komputer harus bereaksi terhadap peristiwa. Selain itu, pemrograman antarmuka
pengguna harus mencakup hal-hal berikut:
• Pengguna menentukan acara, misalnya dengan menggerakkan pointer di layar dengan
mouse.
• Pengguna harus memiliki reaksi yang terlihat terhadap tindakan mereka.
Pola pemrograman dan sistem operasi menangani titik-titik sebelumnya dengan memaksa
aliran data ke dalam aliran data yang sinkron. Misalnya, kita dapat menggunakan antrian
untuk menyimpan data dan kemudian menanganinya secara berurutan. Dimensi waktu dari
suatu peristiwa tidak hilang, tetapi waktu respons terhadap suatu peristiwa bisa berupa apa
saja dari langsung menjadi tidak pernah.

APLIKASI SATU HALAM (SPA)

Aplikasi Satu Halaman (SPA) Aplikasi satu halaman mungkin merupakan jenis
aplikasi yang paling umum digunakan untuk Elm, meskipun tidak terlalu banyak aplikasi
yang dikenal dalam produksi - penekanan pada "diketahui," karena mungkin ada banyak
aplikasi yang kami gunakan. hanya tidak tahu tentang itu menggunakan Elm. Aplikasi saya
sendiri adalah contoh aplikasi "tidak dikenal". Mereka diimplementasikan untuk pelanggan
tertentu dan kemungkinan tidak akan pernah tersedia di ruang publik. Namun demikian,
arsitektur dan bahasa Elm membantu dalam mengimplementasikan aplikasi yang lebih sedikit
kesalahan daripada implementasi JavaScript murni.

15
BAB 2. Pendahuluan

Aplikasi-aplikasi tersebut menggunakan Elm sendiri atau Elm terintegrasi dengan

pustaka dan kerangka JavaScript. Tujuan kami adalah mengembangkan aplikasi seperti yang
ditampilkan dalam buku ini. Sebelum kita dapat menikmati kesenangan melakukan ini,
pertama-tama kita harus menginvestasikan waktu untuk mempelajari dasar-dasar platform
Elm. Buku ini memberikan pengantar komprehensif untuk platform Elm di mana Anda dapat
mendasarkan implementasi aplikasi Elm pertama Anda. Dalam bab ini, kita akan melihat
topik-topik berikut:
• Menginstal platform Elm
• Menentukan editor dan menginstal plugin untuk bahasa Elm
• Mendapatkan tampilan pertama pada bahasa Elm
• Memutuskan bagaimana menggunakan aplikasi Elm
• Mengatur kode sumber aplikasi untuk pengembangan yang lebih mudah
Kami hanya akan menangani dasar-dasar dalam bab ini; topik yang lebih lanjut akan dibahas

Instalasi Global

Instalasi global platform Elm dapat dilakukan dengan installer yang disebutkan
sebelumnya, yang dapat Anda unduh dari situs web Elm, tetapi seperti yang disebutkan
sebelumnya kami berfokus pada npm. Opsi -g memberitahu npm untuk menginstal paket
secara global. Paket Elm yang kami unduh dari repositori npm dibuat selama proses
penerbitan platform Elm, sehingga akan diperbarui dengan versi stabil terbaru dan akan
memiliki versi yang sama dengan installer khusus sistem operasi. Setelah menjalankan
instalasi npm, kita dapat memeriksa apakah platform Elm diatur dengan hanya menjalankan
perintah elm pada baris perintah (Listing 2-2). Listing 2-2. Jalankan el $ elm Elm Platform
0.18.0 - cara untuk menjalankan semua alat Elm Penggunaan: elm <command> [<args>]
Perintah yang tersedia meliputi: buat Kompilasi file atau proyek Elm ke dalam paket JS atau
HTML. Kelola paket dari <http://package.elm-lang.org> reactor. Kembangkan dengan
kompilasi-saat-refresh dan debugging perjalanan waktu, ganti REPL untuk menjalankan
ekspresi individu
Output dari perintah dalam daftar sebelumnya telah menghilangkan baris untuk
singkatnya, tetapi kita dapat melihat informasi yang paling penting. Versi terinstal dari
platform Elm menyediakan empat perintah. Kami akan menggunakan semua perintah ini di

16
bab-bab berikut, jadi kami tidak akan menjelaskannya secara rinci sekarang. Saat ini, kami
hanya ingin memastikan bahwa platform Elm terinstal dan dapat dijalankan. Peringatannya
adalah menjalankan perintah elm tidak membuktikan bahwa alat platform Elm benar-benar
berfungsi. Perintah elm dasar memanggil alat lain untuk melakukan tugasnya, jadi kita perlu
memanggil setidaknya satu alat lain untuk memastikan.

Editor dan IDE

Apa pun opsi yang kita pilih untuk menginstal platform Elm, kita akan memerlukan
editor atau IDE untuk menulis kode. Pengembang yang bekerja dengan Java Virtual Machine
atau .Net bahasa digunakan untuk IDE dengan dukungan luas untuk berbagai tugas
pengembangan, seperti berikut ini:
• Intellisense
• Pelengkapan otomatis
• Refactoring, seperti mengubah nama simbol
• Melompat ke definisi dan simbol
• Memformat kode
• Dukungan debugging
• Integrasi alat
Bahasa-bahasa yang lebih baru seperti Elixir atau Elm tidak menyediakan kemewahan
IDE yang lengkap, tetapi ada plugin untuk editor yang tersedia yang mencapai beberapa tugas
yang baru saja didaftar. Bagian berikut mencantumkan beberapa editor paling populer dan
opsi plugin mereka.

Atom
Ada beberapa plugin yang tersedia untuk Atom yang menargetkan platform Elm. Yang
tercantum di sini menyertakan plugin lain untuk pengalaman yang lengkap.
• Nama Plugin: Elmjutsu
• Tautan: atom.io/packages/elmjutsu
• Fitur: penyorotan sintaksis, pelengkapan otomatis, buka (definisi, simbol, penggunaan),
ganti nama (simbol)
• Komentar: Plugin ini hanya membantu menulis kode; itu tidak memiliki integrasi dengan
alat platform Elm.

17
Emacs
Plugin yang terdaftar adalah satu-satunya yang saat ini mendukung Elm. Ada dukungan
FlyCheck untuk Elm yang tersedia (github.com/bsermons/flycheck-elm), tetapi belum
diperbarui untuk sementara waktu, jadi itu tidak mendukung versi bahasa terbaru pada saat
penulisan.
• Nama Plugin: mode-elm
• Tautan: github.com/jcollard/elm-mode
• Fitur: penyorotan sintaksis, pelengkapan otomatis (melalui elm-oracle dan perusahaan),
indentasi cerdas, integrasi dengan alat platform Elm dan format elm.
IntelliJ
Plugin ini bekerja dengan IntelliJ Community Edition dan IDE lainnya.
• Nama Plugin: elm-plugin
• Tautan: plugins.jetbrains.com/plugin/8192
• Fitur: penyorotan sintaksis, pelengkapan otomatis, parser sintaksis, buka (deklarasi), ganti
nama refactoring, pencocokan penjepit, sorot referensi yang belum terselesaikan, periksa
ejaan.

LightTable
LightTable adalah editor yang tidak digunakan sesering orang lain dalam daftar ini,
tetapi plugin yang dijelaskan di sini adalah salah satu yang terbaik yang pernah saya alami.
• Nama Plugin: elm-light
• Tautan: github.com/rundis/elm-light
• Fitur: penyorotan sintaksis, pelengkapan otomatis, linting dan untuk beberapa kesalahan,
inline docs, cari penggunaan, browser modul, masuk ke (definisi), integrasi dengan elm-repo,
elm-reactor, dan elm-format
• Komentar: Manual ekstensif tersedia di rundis.gitbooks.io/elm- panduan-cahaya / konten /.

Sublim
Plugin ini kompatibel dengan sublime 2 dan 3.
• Nama Plugin: Dukungan Paket Elm
• Tautan: packagecontrol.io/packages/Elm%20Language%20Support
• Fitur: penyorotan sintaksis, pelengkapan otomatis, integrasi dengan elm-repl dan elm-make
• Komentar: Integrasi dengan elm-repo memerlukan pemasangan plugin lain (SublimeREPL).

18
Vim
Plugin ini memiliki integrasi yang sangat baik dengan alat platform Elm dan termasuk
opsi untuk menjalankan tes unit dari dalam editor.
• Nama Plugin: elm-vim
• Tautan: github.com/ElmCast/elm-vim
• Fitur: penyorotan sintaksis, pelengkapan otomatis, indentasi otomatis, linting, integrasi
dengan elm-repl, elm-make, elm-format, dan elm-test.

BAB 3. Elm Primer

Elm tidak hanya bahasa, tetapi juga platform yang digunakan untuk membuat aplikasi
web. Ini memiliki alat dan runtime yang diperlukan untuk menjalankan aplikasi Elm yang
berasal dari kode Elm. Ketika kita mengkompilasi bahkan aplikasi kecil seperti contoh Hello
World dari Bab 2, kompiler Elm membuat file JavaScript dengan kode aplikasi, dan itu juga
mengintegrasikan fungsi runtime yang diperlukan dan kode perpustakaan lain yang
digunakan. Misalnya, ini termasuk paket Html yang, antara lain, memiliki teks fungsi untuk
menampilkan teks pada halaman web.
Seperti namanya, alat ini melakukan lebih dari sekedar kompilasi. Ia juga memeriksa
validitas konfigurasi di elm-package.json dan status paket. Dengan beberapa argumen baris
perintah yang tersedia, elm make dapat dikonfigurasikan saat runtime untuk berbagai
skenario.

Panduan Gaya Elm

Pencipta Elm sangat jelas tentang bagaimana ia membayangkan kode Elm harus ditulis.
Ini mungkin bukan yang biasa Anda gunakan dari bahasa lain atau yang Anda sukai, tetapi
gaya pengkodean yang konsisten memudahkan Anda membaca kode dari orang lain atau
mempertahankannya. kode nanti. Untuk mempermudah tugas ini, kami ingin memformat
kode kami sambil menulisnya tanpa terlalu memikirkan seluk-beluk aturan pemformatan.
Panduan gaya dapat ditemukan di situs web Elm, 3 dan diskusi tentang hal itu dapat
ditemukan di kelompok Diskursus Elm Diskusikan.4 Beberapa editor dengan plugin Elm,
seperti dibahas pada Bab 2, mungkin memiliki pemformatan kode yang sudah dibangun.
Sebagian besar dari mereka mengandalkan format elm, 5 yang juga dapat dijalankan dari
baris perintah. Jika Anda tidak menginginkan integrasi dalam editor, Anda dapat menginstal
elm-format secara lokal dalam suatu proyek. Plugin dapat memformat kode saat disimpan

19
atau sesuai permintaan, tetapi tidak semua editor umum mendukung semua opsi. Situs web
GitHub format elm memiliki tabel dengan informasi tentang integrasi editor dan instruksi
pemasangan.
Elm sebagai Bahasa Fungsional
Definisi bahasa fungsional sulit dijabarkan. Sering kali, diskusi tentang ini akan
melibatkan argumen tentang murni dan tidak murni. Seringkali, bahasa fungsional mungkin
memiliki fitur paradigma lain yang tertanam. Sebagai contoh, Scala dan F # tentu dianggap
bahasa fungsional, tetapi mereka juga memungkinkan konstruksi imperatif atau berorientasi
objek. Apa yang bisa kita katakan dengan pasti adalah bahwa fitur utama dari bahasa
fungsional adalah bahwa fungsi adalah warga negara kelas satu. Suatu fungsi dapat dilihat
dalam istilah matematika sebagai peta nilai input ke nilai output; tidak memiliki efek lain
selain pemetaan ini. Ketika kita memanggil fungsi seperti itu, kita tahu bahwa tidak ada hal
lain yang terjadi pada data di luar fungsi ini. Seperti yang telah kami sebutkan, Elm berakar
pada Haskell, sehingga tidak mengherankan jika Elm adalah bahasa fungsional dengan semua
fitur yang biasanya dikaitkan dengan paradigma fungsional.

Jenis unit
Kami melihat bahwa kami dapat mendefinisikan fungsi polimorfik dengan memberikan
bukan tipe nama, melainkan variabel tipe. Contoh berikut (Listing 3-62) menunjukkan bahwa
kita dapat melakukan hal yang sama dengan tipe. Kami mendefinisikan EventDescription
dengan jenis lampiran yang tidak ditentukan. Kami sekarang dapat membuat jenis ini dengan
berbagai jenis untuk lampiran; misalnya, sebagai daftar string. Fungsi getEventAttachment
menentukan ini dalam anotasi tipe dan bekerja dengan catatan yang ditentukan.

BAB 4. Perkakas dan Perpustakaan

Sekarang, kami ingin menjelajahi tooling yang disediakan oleh platform Elm dan
mendapatkan gambaran umum tentang perpustakaan standar. Bab ini akan membahas topik-
topik berikut:
• Cara menguji cuplikan kode kecil dengan REPL
• Cara untuk memulai proyek dengan perancah
• Bagaimana kita dapat membangun proyek kita
• Tinjauan umum perpustakaan standar yang datang dengan platform Elm

20
REPL
Tampaknya platform apa pun perlu memiliki REPL (read-eval-print-loop) saat ini, atau
tidak dianggap serius. Tentunya masalah preferensi apakah pengembang menggunakan REPL
atau tidak. Alat ini sangat berguna untuk menjelajahi perpustakaan bahasa dan standar atau
pihak ketiga.

Perancah
Ketika kita memulai sebuah proyek, kita mungkin ingin memulai dengan kerangka
proyek pra-dibangun yang mendukung membangun proyek dan men-debug mereka. Platform
Elm tidak menyediakan alat perancah. Aplikasi sederhana tidak terlalu sulit untuk diatur,
tetapi jika kita ingin sedikit lebih banyak maka kita harus mengatur kode kita lebih baik
daripada hanya memiliki semuanya dalam satu file atau bahkan satu direktori. Mencari solusi
perancah Elm mengungkapkan beberapa upaya oleh komunitas Elm untuk mem-bootstrap
proyek. Beberapa ditulis dengan Python, beberapa di Haskell, dan banyak di JavaScript.
Salah satu alat perancah yang paling banyak digunakan untuk aplikasi web adalah Yeoman.1
Alat itu sendiri adalah kerangka kerja untuk generator; saat ini terdapat lebih dari 7.000
generator di dalam basis data. Tidak semua diperbarui secara berkala, dan banyak yang tidak
akan bekerja dengan versi kerangka kerja terbaru, tetapi sisanya menambah jumlah yang
mengesankan. Kami dapat menemukan beberapa generator Elm, tetapi sekali lagi tidak
semuanya diperbarui untuk menangani versi terbaru. Namun demikian, mari kita coba satu
dan melalui proses menyiapkan proyek baru. Saya berasumsi Anda telah mengatur Yeoman
di komputer Anda.

Ganti Versi Elm

Saat ini tidak ada solusi resmi untuk mengganti versi platform Elm. Pesatnya
perkembangan Elm mengharuskan proyek yang berbeda menggunakan versi platform Elm
yang berbeda. Ada pemecahan masalah dengan instalasi lokal dan global seperti yang
dijelaskan dalam Bab 2. Seperti namanya, itu adalah solusi, dan alangkah baiknya memiliki
alat sakelar yang dimasukkan ke platform.

21
Chapter 5

Arsitektur Elm dan Bangunan Blok

Bab ini adalah tentang arsitektur Elm, yang merupakan cara standar untuk membuat
aplikasi dengan platform Elm. Kita akan belajar apa pola arsitektur ini adalah, bagaimana kita
bisa menerapkannya, dan bagaimana kode kita dapat diatur untuk pembangunan dan
perawatan yang mudah.

Arsitektur Elm terletak di jantung dari platform Elm. Ini adalah arsitektur sederhana
namun kuat mirip dengan konsep MVC yang digunakan dalam kerangka kerja lainnya dan
platform. Keuntungan dari arsitektur Elm adalah bahwa kabel penting dilakukan di latar
belakang. Hal ini membuat sedikit sulit pada awalnya untuk memahami apa yang sedang
terjadi, tetapi sekali konsep ini jelas kita melihat bahwa itu mengurangi kode dalam aplikasi
kita secara signifikan.

Arsitektur Ikhtisar Elm

Sebuah model mewakili negara kita gunakan dalam aplikasi kita. Model ini diturunkan dari
fungsi ke fungsi, dan nilai-nilai yang diperbarui dalam kode kita. Model berikut adalah dari
permainan sederhana dan berisi nilai-nilai untuk posisi tikus (x, y), nama gambar latar belakang
(backgroundImage), dan jumlah batu di game (batu). Semua nilai-nilai tersebut adalah jenis
sederhana; ukuran, namun-yang menunjukkan dimensi jendela-menggunakan Ukuran jenis yang
diimpor dari Window modul.

Init

Fungsi init menginisialisasi model dengan fungsi kami menerapkan sebelumnya dan
juga dapat meminta perintah. Ini adalah deskripsi yang menyembunyikan fakta bahwa ada
banyak hal yang terjadi di runtime Elm ketika kita menjalankan init.

Perintah merupakan bagian dari kelompok yang lebih besar yang disebut efek. Hal ini
membantu untuk diingat bahwa efek sebenarnya data yang memberitahu runtime Elm apa
yang ingin kita lakukan dengan cara deklaratif. Data lain dalam kelompok ini adalah
deklarasi HTML dan langganan. Ketika runtime Elm menerima deklarasi efek bekerja di
atasnya untuk membuat efek nyata; misalnya, dengan rendering markup atau memanggil
fungsi lain dalam aplikasi kita.

Pada bagian sebelumnya kita menjelaskan pelaksanaan callback diperlukan untuk

runtime Elm ketika menggunakan arsitektur Elm. Tampaknya sulit untuk memahami pada
awalnya, tapi setelah kami menyadari bahwa banyak tugas hanya berjalan di latar belakang
tanpa intervensi kami dan kami hanya menyatakan apa yang kita inginkan runtime untuk
melakukannya, itu akan lebih jelas bagaimana semuanya bekerja bersama-sama.

22
Organisasi Kode

Sejauh ini di contoh sederhana kami, kami hanya memiliki satu direktori di mana
semua file-file kita diselamatkan. Bagaimana kita dapat mengatur aplikasi Elm jika ada
banyak file dan konfigurasi yang terlibat? Bagaimana kita bisa mengatur kode kita untuk
mematuhi arsitektur Elm?

Cara termudah adalah untuk memiliki semua bagian dari aplikasi dalam satu file (Gambar 5-
3).

Rendering

Seperti yang dijelaskan sebelumnya, Elm adalah platform untuk membuat aplikasi
web. Oleh karena itu paket yang mendukung membangun HTML yang sangat menarik untuk
setiap pengembang menggunakan platform Elm.

Bagian ini memperkenalkan paket Html. Kami telah melihat beberapa metode dalam contoh
lain. Kita ingat bahwa fungsi Html digunakan dalam tampilan fungsi aplikasi kita, tetapi juga
di semua fungsi pembantu kita membangun untuk membuat fungsi tampilan lebih mudah
dibaca.

Graphichs

Kami dapat memberitahu Elm untuk membuat tidak hanya teks, tetapi juga gambar
dan grafis. paling sederhana adalah untuk menampilkan gambar. Kita dapat menggunakan
fungsi pembantu dengan cara yang sama kita menggunakannya untuk tag HTML lainnya.

Css Eksternnal

Pengujian atau debugging aplikasi Elm kami dengan reaktor elm akan melihat CSS
eksternal hanya jika kita menyediakan file HTML kita sendiri. Kami membahas bagaimana
melakukan ini dalam Bab2dan disebut file halaman HTML Standalone ini. Jika kita
menggunakan file ini lagi, kita hanya perlu menambahkan link ke file CSS kami di header.

Communcation Server

Aplikasi Elm tidak tinggal di sebuah pulau, tetapi perlu untuk bertukar data dengan
sumber yang tinggal di luar Elm.

23
 Bagian ini akan membahas cara-cara untuk bertukar data dengan server eksternal. Ini
mungkin SISA server atau fungsi dalam lingkungan serverless melalui HTTP atau pertukaran
atas protokol lain seperti WebSocket.

Untuk mencapai komunikasi dengan server kita perlu dua hal:

• Kita harus menangani permintaan asynchronous dan tanggapan tanpa

memblokir aplikasi kita.

• Kita perlu cara untuk memanggil layanan melalui HTTP.

Platform Elm menyediakan fungsi untuk kedua permintaan HTTP dan WebSockets.
Ini juga memiliki Task jenis didefinisikan dalam elm-lang / inti yang dapat digunakan untuk
rantai bersama-sama permintaan HTTP.

Web Socket

Terlepas dari permintaan HTTP, koneksi ke server juga bisa dilakukan melalui
protokol WebSocket. Tentu saja, ini membutuhkan sebuah server yang mengerti protokol.

WebSockets dapat digunakan untuk aplikasi interaktif atau multi-user dimana data
didorong ke klien secara dinamis dan asynchronous.

Klien berlangganan data yang masuk ( “peristiwa”) dari server-pola yang

mengingatkan kita langganan acara sebelumnya dari setelah membahas interaksi pengguna
atau JavaScript interfacing. Dan, memang, di Elm WebSockets diimplementasikan sebagai
langganan

Chapter 6

Meletakkan Semuanya Bersama

Membangun Halaman Tunggal Aplikasi

Sebuah aplikasi tunggal-halaman (SPA) adalah aplikasi web yang memuat halaman
HTML. Hal ini dapat lebih atau kurang statis, atau dapat memiliki update dinamis dipicu oleh
interaksi pengguna.

Sebagian besar bekerja di sebuah SPA terjadi pada sisi klien. Ini bisa menjadi browser
di desktop atau perangkat mobile, atau pembungkus seperti Electron atau kerangka kerja
lintas-platform lain. Data diolah dalam aplikasi ditransfer ke dan dari server backend melalui
protokol seperti HTTP.

contoh aplikasi kita adalah SPA yang menunjukkan cara menggunakan fitur dari
platform Elm, dibahas dalam bab-bab sebelumnya, dan mengikat mereka bersama-sama
dalam satu aplikasi. Kami akan menggunakan, antara lain, sebagai berikut:

24
• Rendering elemen HTML

• Pengolahan peristiwa user-interaksi

• Styling dengan perpustakaan JavaScript

• permintaan HTTP

• penanganan JSON

Keterangan Alternatif dan desain

Seperti dengan semua spesifikasi dan desain, ada keputusan yang bisa dibuat dengan
cara yang berbeda. Banyak keputusan tersebut didorong dengan menunjukkan Elm fitur
platform tertentu karena mereka dapat digunakan “di alam liar.”

Kami menggunakan backend untuk tugas-tugas yang bisa dilakukan pada sisi client,
seperti memperkirakan waktu pengiriman atau menghitung harga. Ide di balik ini adalah
bahwa mungkin ada lebih dari satu klien makan data ke dalam backend. Ini, tentu saja, akan
mempengaruhi estimasi dan perhitungan.

Beberapa pengembang mungkin menentang memiliki tab digunakan dalam aplikasi

kita, yang di beberapa kalangan tidak dilihat sebagai SPA murni. Jawaban yang sederhana
adalah bahwa kita menggunakannya untuk menunjukkan bagaimana navigasi di Elm bekerja.

Menggunakan komponen JavaScript Bootstrap dapat mengakibatkan oposisi dari beberapa

pengembang yang ingin tinggal di platform Elm. Ada alasan baik untuk itu; misalnya, jenis
memeriksa dan tinggal dalam satu paradigma. Dalam kehidupan nyata, manajer proyek tidak
akan dibujuk oleh argumen bahwa, karena mereka hanya ingin cara cepat untuk masuk ke
produksi. Dan, dengan menggunakan pihak ketiga komponen JavaScript kita dapat
menunjukkan JavaScript interfacing dari Elm sangat baik.

Model

Model kami memiliki dua sisi, sisi klien di Elm dan sisi backend di backend di
Elixir.Yang terakhir berkomunikasi langsung ke database, dalam hal ini database PostgeSQL.
Implementasi database backend adalah skema relasional sedangkan model klien Elm
disimpan relatif datar. Kami memutuskan untuk memiliki satu set DTOs (objek transfer data)
di Elm untuk besi keluar ketidaksesuaian antara klien dan backend.

Diluar aplikasi Elm

Platform Elm memiliki tujuan utama: aplikasi-sebagian besar menulis web satu
halaman aplikasi-dengan bahasa fungsional. Sejauh ini dalam buku ini kita telah melihat
bahwa hal itu dapat melakukan ini dengan baik dalam batasan platform yang berkembang dan
masih bisa berubah, bahkan dalam fungsionalitas inti, selama beberapa tahun ke depan.

Belajar bahasa baru memakan waktu, jadi pertanyaannya adalah sah, apakah Elm
dapat digunakan untuk melaksanakan proyek-proyek lain selain aplikasi web. Dalam

25
beberapa tahun terakhir telah terjadi tren untuk membawa JavaScript dan bahasa yang
transpile ke JavaScript untuk backend dan mengembangkan kedua proses frontend dan
backend dengan satu bahasa. Elm adalah transpiled untuk JavaScript, jadi mungkin itu dapat
digunakan dengan cara yang sama.

Pada bagian berikut kita akan memeriksa kemungkinan menggunakan Elm pada
desktop, baris perintah, dan mengintegrasikannya dengan kerangka web lainnya.

Chapter 7

Tujuan Dari ini Semua

Bahasa Elm memiliki lebih untuk menawarkan dari apa yang telah kita bahas, seperti
berikut:

• aplikasi multi-modul

• Penanganan perubahan negara antara modul

• Encoding dan decoding rumit JSON

• parameter fungsi mengoptimalkan perpipaan

• jenis konstruktor

• Menerapkan fitur seperti otentikasi dan validasi di Elm

• Menerapkan pola fungsional

Dalam daftar ini kita bahkan belum disebutkan fungsi-fungsi di perpustakaan standar
kita tidak membahas dalam buku ini, juga beberapa dari banyak perpustakaan masyarakat
membantu.

Elm adalah bahasa yang berkembang dan platform, dan begitu juga standar dan
masyarakat perpustakaan. Salah satu fitur terbesar di Elm adalah mengetik statis. Semakin
banyak paket yang dibuat untuk memberikan jenis-aman integrasi untuk perpustakaan
JavaScript atau pola CSS seperti Material Design.

Masyarakat

Setiap bahasa pemrograman tergantung pada komunitas pengembang yang

menggunakan bahasa dan sering mengembangkan konsep baru tidak dibayangkan oleh
pencipta bahasa. Bahasa dan kerangka kerja sangat didukung oleh perusahaan-perusahaan
besar tidak selalu menggunakan kekuatan komunitas pengembang. Sebagai contoh, butuh
Microsoft waktu lama untuk membuka NET framework mereka dan menerima sumbangan
dari luar perusahaan. Demikian pula, dalam bahasa dunia Java di atas JVM yang berkembang

26
hampir lebih dari bahasa asli; misalnya, Scala atau Clojure. Dalam dunia fungsional, bahasa
muncul Elixir memiliki efek yang sama pada Erlang VM.

masyarakat Elm adalah sangat aktif dan tertarik untuk membawa platform ke depan.
Kadang-kadang ini mungkin terhadap rencana pencipta bahasa, tapi akhirnya kepentingan
yang berbeda akan datang bersama-sama untuk kebaikan platform.

Penggunaa Komersil

Pertanyaan besar adalah jika platform Elm siap untuk penggunaan komersial.
Beberapa perusahaan yang menggunakannya untuk aplikasi mereka atau setidaknya untuk
bagian dari aplikasi mereka. Ada jumlah yang tidak diketahui dari perusahaan lain yang
menggunakan Elm untuk aplikasi internal atau pelanggan juga.

Cara yang lebih disukai untuk memperkenalkan Elm menjadi sebuah proyek untuk
melakukannya perlahan dan hanya untuk bagian-bagian dari sebuah situs web. Ini mungkin
salah satu cara untuk mengintegrasikan Elm ke aplikasi dan memiliki manajemen setuju,
karena risiko kegagalan diminimalkan.

Kriteria lain untuk penggunaan komersial adalah untuk dapat menjaga kode.
Menemukan pengembang Elm tidak mudah, terutama yang dialami. Hal ini mungkin menjadi
kendala, seperti waktu yang lama antara Elm platform yang rilis dan kurangnya kemungkinan
perbaikan dan patch untuk versi yang ada.

Masa Depan

Seperti orang lain, saya tidak punya bola kristal untuk melihat ke masa depan,
sehingga pengalaman berikut ini tebakan terbaik. Contoh dalam komunitas JavaScript telah
menunjukkan bahwa mode berubah dengan cepat. Belum lama, sudut adalah kerangka paling
dicintai, tapi kemudian tiba-tiba Reaktif telah mengambil alih hampir sepenuhnya. Apakah
dukungan dari Facebook atau perkembangan yang lambat dan perubahan melanggar dan
konsep dari sudut 2? Apakah penggunaan disukai Naskah yang diketik di sudut 2? Atau itu
konsep reaktif?

Platform Elm memiliki potensi besar. Meskipun baik bahwa hype dibatasi, Elm perlu
memiliki peta jalan yang jelas dan setidaknya beberapa tenggat waktu untuk fitur yang akan
datang. Jika tidak, pengembang akan menggunakan Elm untuk proyek-proyek hewan
peliharaan, tapi tanpa perencanaan yang jelas mereka tidak akan dapat berkomitmen untuk
proyek-proyek besar.

27
 BAB III

PEMBAHASAN

A. Perbandingan buku A dan B

Buku utama dan buku pembanding adalah buku yang sama- sama membahas tentang
yang bersangkutan dengan Web, akan tatapi banyak ditemukan hal-hal yang membedakan
kedua buku ini sepeti hal nya pokok bahasan yang dibahas tidak semuanya sama. Salah
satu contoh, dalam buku utama spesifiknya lebih ke halaman web. Sedangkan pada buku
pembanding membahas tentang satu pokok bahasan yaitu aplikasi web dengan elm yang
digunakan pada web. Elm bukan hanya sekedar program tetapi bisa juga sebagai aplikasi.

Selain itu perbedaan dari kedua buku dapat dilihat dari segi isi yaitu pada buku utama
pada pembahasan lebih ke prakte. Sedangkan pada buku pembanding dijabarkan secara
point-point dan lebih ke konsep. Meskipun kedua buku mempunyai topic bahasan yang
berbeda tetapi kedua buku mempunyai fungsi tersendiri dalam pemrograman web,
keduanya sangat dibutuhkan dalam perkembangan web kea rah yang lebih baik. Sama-
sama membahas tentang pemrograman web, menurut penulis pembahasan buku
pembanding lebih luas dan mengunakan point-point tentang pemrograman web
dibandingkan dengan buku utama.

B. KELEBIHAN DAN KEKURANGAN

Buku Utama

Kelebihan:

 Buku mempunyai cover yang cukup menarik untuk dibaca

 Sistemmatika penulisannya cukup bagus
 Penjabaran materi diseratai dengan prosedur yang memdukung materi

28
Kelemahan:

 Penjelasan buku ini bertele-tele sehingga mempersulit pembaca dalam memahami isi
materi
 Buku ini menggunakan bahasa inggris sehingga menggunakan waktu yang cukup
lama untuk memaham isi buku apalagi bagi pemula dalam memahami bahasainggris.
 Mempunyai jumlah halaman dalam jumlah yang tergolong banyak membuat pembaca
merasa bosan untuk membaca buku ini

Buku Pembanding

Kelebihan:

 Buku mempunyai cover yang cukup menarik untuk dibaca

 Pembahasan pada buku ini tidak bertele-tela (lebih ke point-point) sehingga
mempermudah pembaca dalam mengetahui isi buku
 Sistemmatika penulisannya cukup bagus

Kelemahan:

 Jumlah halaman buku sangat banyak sehingga para pembaca akan merasa bosan
dalam membaca buku ini
 Buku ini menggunakan bahasa inggris sehingga menggunakan waktu yang cukup
lama untuk memaham isi buku apalagi bagi pemula dalam memahami bahasainggris.

29
 BAB IV

PENUTUP
A. Kesimpulan

Halaman web: Dokumen teks yang diterbitkan di server Web, memiliki tag HTML di
dalamnya, hampir selalu menyertakan tautan hiperteks, dan biasanya termasuk grafik. Ketika
Anda mengklik Kembali di browser Web Anda, Anda pindah ke halaman Web sebelumnya
yang Anda kunjungi Situs web: Kumpulan halaman Web itu berbagi tema dan tujuan
bersama dan yang biasanya diakses pengguna melalui beranda situs.Halaman Beranda:
Halaman Web yang biasanya diakses orang pertama kali dalam situs Web. Anda membiarkan
orang tahu URL (alamat) Anda beranda dan cobalah untuk mendapatkan halaman web
lainnya pembuat untuk memberikan tautan ke sana. Tag HTML: Perintah pemformatan atau
penautan singkat yang ditempatkan di dalam tanda kurung dalam teks file HTML. Misalnya,
tag <b> memberi tahu browser Web untuk menampilkan teks setelah perintah dalam huruf
tebal; tag </b> berubah menunggu. Lihat Bab 4 untuk lebih lanjut tentang HTML.

Pada 2012, versi pertama dari bahasa fungsional baru diterbitkan. Itu didasarkan pada
Haskell dan disebut Elm; itu disebutkan di sana-sini sebagai salah satu bahasa pemrograman
yang akan datang untuk web. Elm berakar pada Haskell, sehingga tidak mengherankan jika
Elm adalah bahasa fungsional dengan semua fitur yang biasanya dikaitkan dengan paradigma
fungsional. Elm bukan hanya sebagai program tetapi bisa juga sebagai aplikasi.

B. Saran

Demikianlah laporan CBR ini telah kami susun dengansebaik-baiknya. Selaku penulis
kami menyarankan agar pembaca dapat mengulas lebih banyak lagi sumber-sumber buku
yang dapat mendukung pembahasan dalam CBR ini terutama mengenai pemrograman
web dan konsep-konsepnya. Semoga CBR ini dapat diterapkan dengan baik serta berguna
bagi pembaca khususnya bagi kami.

30
 DAFTAR PUSTAKA
Bud E.Smith dan Arthur bebak. 2004. Creating Web pages For Dummies. Canada: Wiley
Publishing,Inc.

Wolgang loder dan Vienna .2012.Web Aplications With Elm. Austria: Apress

31