Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Web Apps
Webdesign

Membuat Aplikasi Web Berbasis API Dengan HTML dan CSS

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building a Mini, API-Driven Web App.
Designing an API-Driven Web App in Sketch
Connecting an API-Driven Web App with Javascript

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Final product image
What You'll Be Creating

Setelah merancang beberapa tiruan visual untuk membantu membimbing kita dalam membangun aplikasi kecil kami untuk browser, kita telah sampai ke bagian yang menarik dan mulai membuat!

Struktur File

Mari kita setup struktur file kita untuk proyek. Akan terlihat seperti ini (dengan masing-masing aset yang hidup dalam folder yang sesuai):

Kami sekarang memiliki folder untuk setiap aset kita, serta file .sketch yang kita buat sebelumnya yang memegang tiruan page kita.

Awal HTML

Berdasarkan struktur file kita, mari kita setup dokumen HTML dasar kita dengan link ke aset (yang akan kita ciptakan dalam sekejap).

Berikut ini adalah apa yang kita miliki:

  • Struktur halaman HTML dasar dengan header, isi, dan daerah footer.
  • Link ke CSS kustom kami (yang kita akan menciptakan)
  • Link ke Pacifico pada font Google (seperti disebutkan sebelumnya, ini adalah font yang kita akan gunakan untuk menampilkan nama app kecil kami)
  • Link ke kami javascript kustom (yang kita akan menciptakan) serta Perpustakaan jQuery pada Google’s Hosted Libraries CDN

Awal CSS

Karena ini sedikit app relatif kecil dan sederhana, saya akan mendukung menggunakan vanili CSS dalam proyek ini (tidak ada preprocessor), tetapi Anda dapat jelas menulis CSS Anda dalam bentuk apa pun yang Anda suka.

Mari kita mulai dengan menyiapkan beberapa halaman dasar gaya dan membuat komentar referensi untuk warna kami akan menggunakan. Dalam assets/css/styles.css lakukan hal berikut:

Di sini kita sudah setup beberapa halaman dasar gaya mengatur gambar, link, dan kita akan menggunakan model kotak. Seperti Anda mungkin telah menyadari, kami menggunakan tag body sebagai pembungkus dengan menetapkan max-width. Ini akan menjaga semua konten kami berpusat di tengah halaman tanpa diluar lebar tertentu.

Perhatikan kita juga didefinisikan nilai-nilai warna, kami akan menggunakan di atas komentar. Karena kita tidak menggunakan preprocessor yang memungkinkan kita untuk menetapkan variabel, ini akan berguna sebagai kita terus menulis gaya kita.

App Header

Mari kita buat header app. Ingat, kita rancang ini di sketsanya:

Screenshot of the header component in Sketch

Jadi, ayo kita buat HTML untuk dicocokkan mock kita. Kita akan menempatkan konten ini dalam elemen header yang kita buat sebelumnya.

Sekarang kita telah memiliki nama aplikasi serta keterangan di bagian atas halaman. Tapi dengan gaya yang biasa.

Screenshot of HTML header

Tulislah beberapa gaya untuk header halamannya yang membawa lebih sesuai dengan tiruannya :

Berikut ini gambaran singkat dari apa yang kita kerjakan:

  • Warna dan spasi untuk wadah header
  • App nama header h1 diatur untuk menggunakan Pacicifo dari Google font (ingat, kita tetapkan link ke resource ini di header kita)
  • App Deskripsi header p sedikit terimbangi untuk menghindari berjalan ke descender "G" nama app.

Sekarang header looking kita sudah lebih seperti desain:

Screenshot of HTML header after adding styles

Namun, ingat bahwa aplikasi ini akan responsif! Jadi jika kita memeriksa gaya ini pada sebuah lebar sempit yang menggunakan alat-alat dev Chrome, kalian akan melihat teks pembungkus untuk Deskripsi sedikit funky karena text-indent

Screenshot of header text wrapping

Untuk mengatasi ini, di norrower widths, kami akan menghapus indentasi teks dan benjolan teks Deskripsi turun dengan besar margin-top sehingga pembungkus tampak lebih alami. Mari kita menulis query media untuk mempermudah kita:

Nah, sekarang kita memiliki header responsif!

Screenshot of completed header

App Input

Tahap berikutnya merupakan peralihan ke daerah input dan output duplikatnya. Ingat mereka tampak seperti ini:

Screenshot of the input component in Sketch

Pertama, kita tambahkan input field ke elemen HTML utama yang kita buat sebelumnya:

Sekarang kita memiliki sebuah form dengan input dan tombol kirim. Sejauh ini terlihat baik, tapi belum terlihat seperti keinginan kita. Kita harus mambahkan beberapa gaya.

Screenshot of app input without styles

Tambahkanlah beberapa gaya untuk elemen input dan tombol form kita.

Di sini kita tambahkan beberapa gaya pada input form dan tombol serta beberapa states yang berbeda seperti :hover, :focus, dan :disabled. Inilah yang memberikan gaya seperti yang kita dirancang dalam duplikatnya.

Screenshot of styled input

App Output

Pada point ini kita akan membuat sesuatu yang kita sebut dengan daerah "output". Pada tempat inilah secara dinamis kita membuat ikon yang dikembalikan oleh iTunes AP. Meskipun, pada inisial halaman awal, pengguna belum belum me-request apa pun. Jadi kita akan menggunakan desain states kosong dari sekarang. Ingat gambarannya, tampak seperti ini:

Screenshot of the zero state in Sketch

Kita tambahkan elemen main HTML yang trlah dikerjakan:

Perhatikan jika kita menambahkan output HTML tepat setelah memasukan HTML. Terdiri dari wrapper, yang merupakan kotak putih besar dalam desainnya, serta konten, yang berpusat dalam itu. Kita gunakan CSS untuk mengatur elemen .content agar memiliki lebar maksimal 512 piksel, yang merupakan ukuran paling besar untuk menampilkan ikonnya. Untuk saat ini akan terlihat seperti ini:

Screenshot of output without styles

Perhatikan ikon placeholder yang hilang. Jika kita kembalikan ke dokumen Sketsa, mudah menampilkan aset itu sebagai SVG untuk digunakan di browser.

Screenshot of outputing icon placeholder in sketch

Sekarang kita harus memiliki gambar yang muncul di browser.

Screenshot of output without styles

Masukkan beberapa gaya pada kotak outputnya.

Sebagian besar CSS yang kita tambahkan memiliki komentar dalam kode untuk menjelaskannya. Kami tambahkan gaya keluar wrappernya, karena, kami tidak melakukan penyetelan ulang CSS lengkap pada page, kita melakukan penyetelan ulang sederhana pada elemen HTML di dalam area konten kami dengan menerapkan .konten *.

Terakhir, kita tambahkan beberapa style untuk mempertebal state kosongnya. Sekarang seharusnya akan menyerupai gambaran awalnya.

Screenshot of output with styles

Bagus sekali!

Sekarang setelah struktur HTML-nya siap, tepat seperti gaya yang sesuai, kami siap untuk terjun dan menangani interaksi halaman dengan JavaScript!

Pada tutorial berikutnya (dan terakhir) dari seri ini, kami akan mencari tahu cara mengambil masukan pengguna, membuat permintaan API, dan menampilkan hasilnya di browser. Sampai jumpa! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.