Tips Code

Vue.js merupakan salah satu framework JavaScript yang telah memenangkan hati banyak pengembang web di seluruh dunia. Framework ini memudahkan pengembang dalam membangun interface pengguna yang interaktif dan aplikasi Single Page Application (SPA) dengan efisien. Sifatnya yang reaktif memungkinkan pengembang untuk membuat aplikasi yang responsif dan mudah dipahami. 5 Package Vue JS Untuk Front End Developer Dalam dunia Front End Development, pemilihan library atau package yang tepat sangat penting untuk mendukung proses pengembangan yang lebih efisien dan produktif. Jika Anda adalah developer yang menggunakan Vue.js, berikut adalah lima package atau pustaka yang direkomendasikan dan contoh implementasinya: 1. Vue Router Vue Router for Vue.js Vue Router adalah package resmi Vue.js yang digunakan untuk membuat aplikasi Single Page Application (SPA). Dengan Vue Router, Anda dapat mengatur navigasi antar halaman tanpa melakukan refresh halaman. Misalnya, kita dapat mengatur routing seperti ini: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ] const router = new VueRouter({ routes // short for `routes: routes` }) new Vue({ router, }).$mount('#app') Keuntungan: Mudah digunakan dan diintegrasikan dengan aplikasi Vue.js.Mendukung lazy loading dan dynamic routing.Dapat melakukan transisi halaman yang halus dengan efek transisi kustom. Kekurangan: Kurva belajar cukup tinggi untuk pemula.Konfigurasi bisa menjadi rumit untuk aplikasi dengan routing yang kompleks. 2. Vuex Vuex Development Cycle Vuex adalah library untuk state management di Vue.js. Dengan Vuex, Anda dapat mengatur state aplikasi yang dibutuhkan oleh banyak komponen dalam satu tempat. Contoh implementasi Vuex: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) Keuntungan: Menyediakan satu sumber kebenaran (single source of truth) untuk state aplikasi.Memudahkan pengelolaan state antara komponen.Mendukung plugin untuk log perubahan state dan integrasi dengan devtools. Kekurangan: Bisa menjadi overkill untuk aplikasi sederhana.Kurva belajar yang cukup tinggi, terutama untuk pemula. 3. Vuetify Vuetify Project Vuetify adalah library UI/UX yang menyediakan komponen UI yang siap pakai. Dengan Vuetify, Anda dapat membuat antarmuka pengguna yang indah dengan upaya minimal. Contoh penggunaan komponen Vuetify: <v-app> <v-main> <v-container> <v-btn color="primary">Primary Button</v-btn> </v-container> </v-main> </v-app> Keuntungan: Menyediakan berbagai komponen UI yang siap pakai.Mendukung Material Design.Responsif dan kompatibel dengan semua browser modern. Kekurangan: Customisasi tema bisa menjadi rumit.Ukuran library yang cukup besar bisa mempengaruhi performa aplikasi. 4. Vue CLI Vue CLI for Vue.js Vue CLI adalah alat Command Line Interface (CLI) resmi Vue.js yang membantu proses setup proyek baru, serta otomatisasi pengujian, linting, dan proses build lainnya. Untuk membuat proyek baru menggunakan Vue CLI, cukup jalankan command berikut di terminal: vue create my-project Dan untuk membuat proyek baru menggunakan Vue GUI serta mengelola proyek Vue.js yang ada, jalankan command berikut: vue ui Vue CLI Service Keuntungan: Mudah membuat proyek baru dengan setup yang fleksibel.Mendukung hot-reloading, linting, testing, dan banyak lagi.Plugin Vue CLI memperluas kemampuan Vue CLI. Kekurangan: Beberapa konfigurasi bisa menjadi rumit untuk pemula.Kurang fleksibel dibandingkan dengan setup manual. 5. Nuxt.js Nuxt.js Vue Framework Nuxt.js adalah framework berbasis Vue.js yang dirancang untuk membuat aplikasi Vue.js dengan server-side rendering, static site generation, dan single page app. Contoh membuat halaman baru di Nuxt.js cukup dengan membuat file .vue di direktori pages, misalnya: <template> <h1>About Us</h1> </template> Keuntungan: Mendukung server-side rendering, static site generation, dan single page app.Konfigurasi default yang kuat dan kerangka kerja yang terstruktur.Menyediakan fitur pre-rendering dan peningkatan SEO. Kekurangan: Kurva belajar cukup tinggi, terutama untuk pengguna Vue.js pemula.Konfigurasi bisa menjadi kompleks dan sulit dikelola untuk aplikasi skala besar. Semua package diatas bukan hanya memudahkan proses pengembangan, tetapi juga membantu developer untuk menghasilkan kode yang lebih rapi, terstruktur, dan mudah dipelihara. Oleh karena itu, sangat direkomendasikan bagi setiap Front End Developer yang menggunakan Vue.js untuk mengenal dan memanfaatkan package-package ini. Ada keuntungan dan kekurangan masing-masing dari masing-masing package, dan pemilihan package yang tepat akan bergantung pada kebutuhan spesifik proyek Anda. Memahami kekuatan dan kelemahan tiap package ini dapat membantu anda membuat keputusan yang lebih baik dalam memilih alat yang tepat untuk proyek Anda. Kesimpulan Memahami Vue.js sebagai salah satu framework JavaScript populer adalah langkah penting bagi setiap Front End Developer. Dengan sifatnya yang reaktif, dukungan untuk komponen, dan fleksibilitas yang tinggi, Vue.js dapat memudahkan dan mempercepat proses pengembangan web. Dengan dukungan dari komunitas yang kuat dan berkembang, Vue.js juga menawarkan beragam pustaka dan alat yang dapat membantu Anda dalam membangun aplikasi yang beragam dan kompleks. Setiap package yang telah kita bahas sebelumnya, seperti Vue Router, Vuex, Vuetify, Vue CLI, dan Nuxt.js, memberikan berbagai fungsionalitas yang dapat memudahkan proses pengembangan aplikasi Vue.js Anda. Namun, memilih package mana yang akan digunakan tergantung pada kebutuhan spesifik proyek Anda. Jika kalian masih penasaran dan ingin memperdalam Vue.js, buildwithangga.com telah menyediakan kelas gratis dan juga berbayar (premium) yang bisa kalian pelajari, seperti kelas Vue JavaScript Framework, Full-Stack Golang Vue NuxtJS: Website Crowdfunding, dan Full-Stack Web Developer: Toko Online, serta masih banyak lagi kelas lainnya. Dengan mengikuti kelas-kelas diatas anda akan dibekali portfolio yang sangat berkelas dan diajarkan dari awal hingga mahir. Semoga artikel ini membantu Anda dalam memahami Vue.js dan bagaimana package-package ini dapat memperkaya pengalaman pengembangan Anda. Selamat mencoba dan selamat mengembangkan aplikasi luar biasa dengan Vue.js!

Jika kalian adalah seorang Front-end web developer atau sedang mengerjakan tampilan website, maka perlu mencoba framework CSS yang satu ini. Tailwind CSS adalah salah satu framework CSS populer yang bisa mempermudah developer untuk membangun tampilan website yang terlihat modern tanpa perlu membuat CSS sendiri dari awal. Pada Tailwind CSS sudah disediakan berbagai class utilities yang bisa kita gunakan secara langsung, dengan menggunakan class utilities yang sudah disediakan tersebut akan mempercepat dan mempermudah kita untuk membuat tampilan dari versi prototipe hingga versi rilis nanti. Membuat Form Login Menggunakan Tailwind CSS Login page adalah bagian dari website di mana pengguna diminta untuk memasukkan informasi akun yang berupa username atau email dan password, agar user bisa mengakses sebagian atau seluruh fitur dari website tersebut. Form login biasanya merupakan salah satu bagian website yang cukup sederhana dari segi tampilan, karena memang tidak banyak yang perlu kita buat dan juga untuk pengguna berinteraksi pada halaman tersebut. Pada artikel ini kita akan mencoba membuat form login menggunakan Tailwind CSS mulai dari instalasi Tailwind CSS dengan CDN hingga membuat tampilan website. tanpa berlama-lama lagi mari kita coba. Install Tailwind CSS Menggunakan CDN Cara ini adalah cara yang paling sederhana untuk bisa menggunakan Tailwind CSS pada proyek website kita dan sangat cocok jika kita hanya ingin mencoba atau hanya sekedar untuk tahap pengembangan. Yang perlu dilakukan cukup sederhana, kita siapkan terlebih dahulu file atau template HTML yang akan kita gunakan. lalu salin barisan kode berikut. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="<https://cdn.tailwindcss.com>"></script> </head> <body> <h1 class="text-3xl font-bold underline">Membuat Form Login Menggunakan Tailwind CSS</h1> </body> </html> Jika sudah dan berhasil menjalankan Tailwind CSS, maka tampilan website kita akan terlihat seperti berikut. Tampilan awal website setelah instalasi berhasil Membuat Kerangka HTML Untuk mempermudah kita melihat bagian-bagian yang akan kita beri style, kita akan membuat kerangkan HTML terlebih dahulu. Langkah ini akan memberikan kita gambaran seperti apa elemen-elemen tersebut akan kita susun dan diberi style. teman-teman bisa salin code berikut pada template HTML yang sudah ada, terdapat tambahan pada element body dan kita akan menggunakan icon dari google. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="<https://fonts.googleapis.com/icon?family=Material+Icons>" rel="stylesheet" /> <script src="<https://cdn.tailwindcss.com>"></script> </head> <body> <div> <div id="Banner"> <div> <h2><i class="material-icons" style="font-size: 36px">map</i>TRAVELLING</h2> </div> <div> <p>TIME TO TRAVEL THE WORLD</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dignissimos nam optio eius delectus possimus nostrum dolores amet maiores corporis!</p> </div> </div> <div id="FormSection"> <h1><span>Welcome Back! </span><br />Journey Begins Here</h1> <div id="Forms"> <form> <div> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Enter your email" required /> </div> <div> <label for="password">Password</label> <div> <input type="password" id="password" name="password" placeholder="Enter your password" required /> <i class="material-icons" style="font-size: 16px">visibility</i> </div> </div> <button type="submit">Login</button> </form> <div>or</div> <a href="#"><img src="ic_google.svg" alt="google" width="18px" /> Sign-in with Google</a> <div> <p>Don't have an account? <a href="#">Register here</a></p> </div> </div> </div> </div> </body> </html> Jika berhasil dan berjalan dengan baik, maka tampilan website kita akan terlihat seperti dibawah ini. setelah tahap ini kita akan memberikan style pada elemen yang ada dengan Tailwind CSS. Tampilan website tanpa style dari Tailwind CSS Styling Layout Menggunakan Tailwind CSS Setelah kita membuat kerangka HTML, kita perlu memberikan style dasar terlebih dahulu, langkah ini akan semakin memperjelas gambaran style seperti apa yang akan kita gunakan. Pada tahap ini kita akan berikan style pada elemen parent yang akan menentukan letak elemen kecil-kecil yang ada didalamnya. kita bisa salin code berikut pada elementnya masing-masing. Pertama, kita akan berikan class pada elemen parent utama dibawah elemen <body> dan pada elemen #banner. Pada #banner kita akan berikan background image, kita bisa menambahkannya dengan fitur arbitrary values bg-[url('FILE_PATH')]. Elemen #banner akan memliki lebar dengan ukuran 7/12, yang artinya jika kita ibaratkan dengan kolom maka #banner lebarnya 7 kolom, dan menggunakan flexbox dengan konten yang akan diberi jarak otomatis di antara setiap konten pada elemen #banner. <body> <div class="w-100 h-screen flex flex-row text-[#34364A]"> <div id="Banner" class="w-7/12 bg-[url('banner4.jpg')] bg-cover text-white flex flex-col justify-between font-sans"> Selanjutnya, kita berikan style pada elemen #FormSection. Mirip seperti elemen #banner, namun kali ini kita tidak menambahkan gambar dan lebarnya 5/12. <div id="FormSection" class="w-5/12 flex flex-col justify-center items-center"> Tampilannya akan terlihat seperti ini. Tampilan website setelah diberikan style dasar pada layoutnya Styling Elemen Dengan Tailwind CSS Selanjutnya, setelah elemen sudah pada posisinya. kira akan mulai dari elemen sebelah kiri yang ada pada #banner. Pada langkah ini kita akan mengubah style pada text yang ada dan memberikan padding, serta sedikit background gradien hitam pada text paling bawah agar lebih mudah dibaca dan ada efek terpisah dari background image. Kode pada elemen #banner akan menjadi seperti berikut. <div id="Banner" class="w-7/12 bg-[url('banner4.jpg')] bg-cover text-white flex flex-col justify-between font-sans"> <div class="px-8 pt-8"> <h2 class="text-3xl"><i class="material-icons" style="font-size: 36px">map</i>TRAVELLING</h2> </div> <div class="bg-gradient-to-t from-black pl-8 pb-8 pr-[25%]"> <p class="text-6xl mb-6 font-medium leading-[75px] tracking-wide">TIME TO TRAVEL THE WORLD</p> <p class="text-md text-slate-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dignissimos nam optio eius delectus possimus nostrum dolores amet maiores corporis!</p> </div> </div> Tampilannya akan menjadi seperti berikut. Tampilan website dengan bagian banner sudah diberi style Sekarang, kita akan masuk pada elemen #FormSection. Konten atau elemen child pada #FormSection akan kita buat berada di tengah dengan bantuan flexbox dan text align. Pertama, kita ubah bagian judul paling atas menjadi ke tengah dan berikan style pada font. <h1 class="text-center mb-8 text-3xl font-bold"><span class="text-xl">Welcome Back! </span><br />Journey Begins Here</h1> Selanjutnya, pada bagian form jika kita perhatikan input field masih berada dalam satu baris dengan labelnya, kita akan pisahkan pada baris masing-masing dengan bantuan flexkbox dan kita beri jarak. Pada bagian password kita akan tambahkan icon untuk fitur lihat password, karena kita menggunakan 2 elemen berbeda, maka kita akan membuat posisi icon menjadi absolute dan berapa di atas elemen input password. tidak lupa juga kita memberikan style pada elemen input dan button. <div id="Forms" class="flex flex-col gap-y-6 text-center w-7/12"> <form class="text-left font-medium flex flex-col gap-[16px]"> <div class="flex flex-col"> <label class="mb-2" for="email">Email</label> <input type="email" id="email" class="border rounded-md border-gray-400 hover:border-black focus:border-black p-[8px_10px]" name="email" placeholder="Enter your email" required /> </div> <div class="flex flex-col"> <label class="mb-2" for="password">Password</label> <div class="relative"> <input type="password" id="password" class="border rounded-md border-gray-400 hover:border-black focus:border-black p-[8px_10px] w-full" name="password" placeholder="Enter your password" required /> <i class="material-icons absolute top-[33%] right-[15px]" style="font-size: 16px">visibility</i> </div> </div> <button type="submit" class="text-center text-white p-[8px_10px] w-full bg-blue-700 rounded-md">Login</button> </form> <div>or</div> <a href="#" class="border rounded border-gray-400 hover:border-black focus:border-black p-[8px_10px]"><img src="ic_google.svg" alt="google" class="inline mr-[6px]" width="18px" /> Sign-in with Google</a> <div> <p>Don't have an account? <a href="#" class="text-blue-700">Register here</a></p> </div> </div> Jika semua sudah sesuai makan tampilan website kita akan terlihat seperti ini. Tampilan website akhir setelah seluruh style berhassil diaplikasikan Penutup Dalam artikel ini kita sudah mencoba untuk membuat form login dengan dua sisi tampilan, sebelah kiri berikan konten untuk mengisi ruang kosong dan bagian kanan terdapat form untuk login. Jika kita lihat kembali dari awal, kita tidak membuat custom CSS sendiri, baik pada file CSS terpisah maupun di dalam file HTML. Hal tersebut adalah keuntungan jika menggunakan framework CSS seperti Tailwind CSS. Jika teman-teman masih penasaran dengan Tailwind CSS, bisa mencoba kelas Tailwind CSS yang ada pada buildwithangga.com, seperti kelas CSS Tailwind Web Design dan Master Class: React JS dan Tailwind CSS Website Development, serta masih banyak lagi kelas lainnya.

Goal Bekerja sama dengan designer dan developer di BuildWithAngga dalam mengembangkan platform belajar ui ux design dan software development secara online sehingga kita dapat membantu lebih banyak orang untuk upgrade skills mereka dengan mudah. Details Magang offline di Starbucks PVJ setiap hari Senin, Rabu, dan KamisSelasa dan Jumat magang dari rumah (online)Biaya Starbucks akan ditanggung oleh BuildWithAngga Responsibilities Menganalisa perkembangan teknologi website terbaruBelajar membuat fitur-fitur pada website BuildWithAnggaBelajar hal baru di dunia programming dengan resource dari BuildWithAngga Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (Sarjana/SMA) boleh applySudah mengikuti minimal 1 kelas Premium di BWATinggal di kota Bandung atau bisa pindah ke Bandung Benefits Free akses 1 kelas Premium bebas pilihMagang offline di Starbucks 3x per mingguBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulanan Challenge Buatlah sebuah halaman katalog kelas sederhana (bisa contek punya BuildWithAngga) yang tersedia list kelas beserta dengan filter tipe kelas Starter, Freemium, dan Premium. Gunakan data dummy sehingga projek tersebut dapat digunakan secara interaktif untuk melakukan filtering kelas menggunakan Vue atau Nuxt JS. Jika sudah selesai, upload projek tersebut ke Netlify sehingga dapat diakses secara online dan untuk direview oleh tim BuildWithAngga. How to Apply Siapkan Resume (CV) & link Netlify (hasil test) dengan rapihIsi body email dengan hasil test di atasIsi subject email dengan Magang Frontend Vue Juli 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 13 Juli 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami BuildWith Angga. Terima kasih.

Goal Bekerja sama dengan designer dan developer di BuildWithAngga dalam mengembangkan platform belajar ui ux design dan software development secara online sehingga kita dapat membantu lebih banyak orang untuk upgrade skills mereka dengan mudah. Details Magang online dari rumahJam kerja 9 pagi s/d 5 sore Hari kerja Senin s/d JumatMagang selama 3-6 bulanSetelah magang berkesempatan kerja full-time Responsibilities Menganalisa perkembangan teknologi website terbaruBelajar membuat fitur-fitur pada website BuildWithAngga Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 2Fresh graduate (Sarjana/SMA) boleh applySudah mengikuti minimal 1 kelas Premium di BWA Benefits Free akses 1 kelas Premium bebas pilihBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulanan Challenge Buatlah ERD sederhana terkait projek website yang dapat membantu orang membeli tiket pesawat, tidak harus lengkap tapi fokus pada bagian utamanya saja. Simpan challenge ERD tersebut sebagai bentuk .PDF dan siapkan untuk dikirim melalui email di bawah ini. How to Apply Siapkan Resume (CV) & Hasil test dengan rapihIsi body email dengan hasil test di atasIsi subject email dengan Magang Backend Laravel 2023/2024Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 5 September 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami BuildWith Angga. Terima kasih.

NextJS merupakan salah satu framework yang populer digunakan untuk mengembangkan sebuah website. NextJS juga merupakan framework yang berbasis Javascript serta dibangun di atas library ReactJS. Salah satu keunggulan dari NextJS yaitu kemampuannya dalam membuat sebuah aplikasi website yang memiliki performa SEO (Search Engine Optimization) yang tinggi sehingga jika kamu membuat website menggunakan NextJS, website kamu akan lebih mudah untuk dikenali oleh mesin pencari Google. Proses Rendering Pada NextJS Saat mengakses sebuah website, pengguna akan melakukan sebuah permintaan untuk mengakses website tersebut. Permintaan tersebut akan dikrim ke dalam sebuah server dan server akan merespon permintaan pengguna dan akan mengirim balik respon tersebut ke pengguna. Seperti jika pengguna ingin mengakses tampilan dari sebuah website maka server akan mengirimkan data berupa file HTML, CSS, dan Javascript kepada pengguna sehingga pengguna dapat melihat visual dari website yang diakses. Proses untuk menampilkan dari kode HTML, CSS, dan Javascript menjadi tampilan visual itu disebut sebagai rendering. NextJS menyediakan rendering dapat dilakukan dalam dua sisi, yang pertama dari sisi klien/pengguna dan dari sisi server. Proses Rendering pada Sisi Klien Rendering pada sisi klien berarti proses rendering dilakukan pada sisi klien, artinya server hanya bertugas untuk mengirimkan file HTML dan Javascript dari suatu website ke perangkat client. Setelah kode tersebut diterima oleh browser klien, kode tersebut baru akan diproses sehingga klien bisa melihat visual dari website tersebut. Hal tersebut dapat memberikan keuntungan berupa website menjadi lebih interaktif terhadap pengguna dan menjadi lebih responsif. Jika sebuah website memiliki konten yang kompleks atau memiliki banyak interaksi karena proses rendering dilakukan di sisi klien sehingga server dapat lebih fokus untuk memproses pengolahan data dan memberikan data yang diperlukan. "use client" import React, { useEffect } from 'react' import { useState } from 'react'; import axios from 'axios'; export default function CsrPage() { const [dateTime, setDateTime] = useState(); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await axios .get('https://worldtimeapi.org/api/ip') .then((res) => { setDateTime(res.data.datetime); }) console.log(response.data.datetime); } catch (error) { console.error(error); } finally { setLoading(false); } } fetchData(); }, []); return ( <div> {loading ? ( <p>Loading...</p> ) : ( <div> <h1>{dateTime}</h1> </div> )} </div> ) } Pada kode tersebut menggunakan useEffect sebagai indikator bahwa program tersebut mengambil data dengan memprosesnya pada sisi klien. Jika program tersebut dijalankan maka ketika browser mencoba untuk mengambil data maka akan menampilkan tulisan loading selama beberapa detik baru browser akan menampilkan data dari suatu API. Proses Rendering di Sisi Server Berbeda dengan sebelumnya rendering pada sisi server memproses kode HTML dan Javascript. Jadi sebelum data dikirimkan ke klien server akn memproses terlebih dahulu kode berupa HTML dan Javascript dari website yang akan diakses. Setelah selesai maka server akan mengirimkan hasil proses tersebut ke sisi klien. Hal ini dapat memeberikan keuntungan berupa proses memuat tampilan website menjadi lebih cepat karena tampilan website telah diproses sebelumnya pada server. Selain itu mesin pencari juga dapat dengan mudah mengakses konten yang dihasilkan oleh server sehingga membuatnya menjadi SEO-friendly. import React from 'react' import axios from 'axios'; export default function SsrPage({dateTime} ) { return ( <div> <h2>{dateTime}</h2> </div> ) } export const getServerSideProps = async () => { const res = await axios.get('https://worldtimeapi.org/api/ip'); const dateTime = res.data.datetime; return { props: { dateTime }, }; }; Pada contoh di atas, fungsi getServerSideProps() adalah sebuah fungsi async yang digunakan untuk melakukan fetching data pada sisi server. Data diambil melalui permintaan ke endpoint API menggunakan Axios. Data yang telah diambil kemudian dikembalikan sebagai objek dengan properti props, dan properti tersebut akan menjadi properti yang dikirimkan ke komponen SsrPage untuk dirender dengan data yang telah diambil pada sisi server. Dengan menggunakan getServerSideProps(), proses fetching data akan dilakukan pada sisi server untuk setiap permintaan yang masuk, sehingga halaman dapat dirender dengan data yang selalu terbaru. Kesimpulan Dalam prakteknya, kombinasi dari rendering pada sisi klien dan rendering pada sisi server dapat digunakan untuk memanfaatkan keuntungan dari masing-masing pendekatan. Pendekatan ini dikenal sebagai Hydration, di mana rendering pada sisi server digunakan untuk tampilan awal yang cepat dan SEO-friendly, sementara rendering pada sisi klien mengambil alih untuk interaksi selanjutnya dan memperbarui tampilan secara dinamis di browser. Jika kamu tertarik untuk belajar pengembangan website, kamu bisa mengikuti kelas NextJS Basic bisa meggunakan NextJS kamu juga perlu pengetahuan dasar tentang Javascript dan ReactJS kamu bisa mempelajari hal tersebut di buildwithangga.com

Goals BuildWithAngga sedang meningkatkan kualitas belajar pada kelas gratis, oleh karena itu kami butuh bantuan Anda untuk memberikan feedback pada materi kelas Freelance Website Developer with WordPress Elementor. Tata Cara Selesaikan materi dan projek pada kelas berikut Freelance Website DeveloperDokumentasikan hasil belajar projek kelas tersebut, boleh berupa video di upload ke YouTube atau Live websiteTulis feedback dengan details terkait materi kelas tersebut tentang apa yang perlu ditingkatkan lagi oleh tiap mentor, semakin details semakin bagus.Lalu submit hasil challenge pada form berikut Form Submit Freelance WP Pemenang Kami akan memilih 5 pemenang dengan kriteria berikut: Sudah mengikuti minimal 1 kelas Premium di BuildWithAnggaMemberikan feedback yang details sehingga mudah dipahami oleh kamiMenyertakan nomor HP untuk kami berikan hadiah Rp 100.000 per orang Tanggal Dibuka pada tanggal 8 Juni dan ditutup pada tanggal 22 Juni 2023. Pemenang diumumkan melalui Instagram BuildWithAngga pada tanggal 1 Juli 2023.

EVENT CLOSED. PEMENANG AKAN SEGERA DI-UPDATE. Goals BuildWithAngga ingin membantu mereka yang ingin belajar melalui teks dibandingkan video pada kelas Premium kami umumnya. Oleh karena itu kami membutuhkan bantuan kalian untuk mempelajari Ebook HTML5 Website Development buatan BuildWithAngga dan mengikuti step-by-step untuk memberikan feedback yang dapat meningkatkan kualitas ebook tersebut. Tata Cara Pelajari ebook berikut HTML 5 Website DevelopmentBuatlah .ZIP projek hasil belajar dari ebook tersebutIsi form feedback pada link berikut joinbwa.com/fbehtml Pemenang Kami akan memilih 10 pemenang dengan kriteria berikut: Sudah mengikuti minimal 1 kelas PremiumMemberikan feedback yang details sehingga mudah dipahami oleh kamiMenyertakan nomor HP untuk kami berikan saldo Rp 50.000 per orang Tanggal Dibuka pada tanggal 20 Mei dan ditutup pada tanggal 1 Juni 2023. Pemenang diumumkan melalui Instagram BuildWithAngga pada tanggal 10 Juni 2023.

Goals Bekerja sama dengan designer dan quality assurance untuk membangun fitur menggunakan framework PHP Laravel sesuai kebutuhan pengguna website BuildWithAngga. Responsibilities Membuat fitur dengan LaravelMeningkatkan perfomance websiteMeningkatkan security pada websiteMendokumentasikan hasil pekerjaan dengan baik Requirements Minimal lulusan S1 IT atau SIMinimal pengalaman kerja backend 1 tahunKerja full time on site di BandungJika dari luar bandung bisa apply dan pindah ke bandungSedang tidak bekerja freelancer, part time, full timeBekerja dari rumah namun akan ada sesi kerja offline bersama-sama di Starbucks Bekerja di Starbucks Mall PVJ Bandung setiap hari Senin, Rabu, JumatHari Selasa dan Kamis bekerja dari rumahBiaya kopi starbucks akan ditanggung oleh BuildWithAnggaMinimal telah mengikuti 1 kelas Premium di BuildWith Angga (untuk memastikan bahwa kamu sudah mengenal cara belajar di BWA)Mengerjakan challenge sederhana yang tersedia di bawah Challenge Buatlah ERD sederhana untuk entity Teacher, Class, Student, dan My ClassBuatlah flowchart sederhana untuk alur Student mengikuti salah satu kelas gratis di BuildWithAngga Simpan hasil challenge sebagai bentuk format .PDF How to Apply Siapkan Resume (CV) & jawaban test pada file .PDFIsi subject email dengan Apply Backend 2023 BandungKirim lamaran ke email [email protected] Lowongan dibuka pada tanggal 26 April 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWithAngga, stay tuned.

Sebagai seorang programmer, kita membangun aplikasi atau website untuk membantu hidup masyarakat menjadi lebih mudah seperti membeli makanan, tiket kereta, baju baru, semuanya dilakukan secara online melalui laptop atau smartphone. Tipe data Boolean memiliki peran penting untuk mewujudkan hal terbesar itu, Boolean memiliki dua nilai yaitu adalah True dan False, kita sering menggunakan boolean apabila ingin membuat sebuah keputusan yang terkait dari alur pada aplikasi atau website tersebut. Contoh penerapan tipe data Boolean Misalnya kita bikin aplikasi beli tiket pesawat, hal pertama dilakukan pengguna adalah login terlebih dahulu kepada aplikasi tersebut. Jika pengguna belum login (atau False) maka diarahkan kepada halaman login atau sign up, jika sudah berhasil login (berubah jadi True) maka diarahkan kepada halaman browsing tiket pesawat. Well, kurang lebih seperti itu contoh penerapan tipe data boolean dalam mengatur flow dan user experience. Mari kita coba tuliskan kodingan contoh flow di atas dengan menggunakan bahasa pemrograman python, sehingga dapat kita bayangi lebih jauh lagi. # bikin variable dengan nilai boolean False hasUserLoggedIn = False # cek apakah user sudah login (True) atau belum (False) if hasUserLoggedIn == True: print('Pilih tiket tersedia di bawah ini: ....') else: print('Anda akan kami arahkan kepada halaman login/sign up') Boolean adalah tipe data primitive Boolean termasuk tipe data primitive yang artinya adalah sudah tersedia pada bahasa pemrograman python tanpa harus menggunakan library tambahan, boolean digunakan sebagai pondasi dari sederhana atau kompleksnya sebuah algoritma pada website atau aplikasi tersebut. Boolean operation Pada tipe data boolean tersedia built-in boolean operation seperti logical AND, logical OR, dan logical NOT yang dapat digunakan untuk mengatur logical operation pada projek aplikasi atau website. Mari kita coba tulis barisan kodingnya (AND) untuk memahami lebih jauh: # atur variable a dengan nilai True a = True # atur variable a dengan nilai False b = False # kita coba gabungkan True dengan False bandingkan = a and b # maka hasilnya adalah False print(bandingkan) # namun apabila keduanya memiliki nilai True # kita ubah variable b memiliki nilai True b = True # kita coba gabungkan True dengan True bandingkan = a and b print(bandingkan) # maka hasilnya menjadi True Comparison operators Tipe data boolean juga kita sering gunakan untuk memeriksa apakah orang tersebut memiliki uang dalam membeli produk secara online, contoh kodingan python toko online-nya seperti di bawah ini: # membuat variable saldo tipe data integer saldo = 500000 # membuat variable harga produk tipe data integer harga_produk = 2390494 # membuat variable dengan value boolean dari gabungan interget di atas # kita cek apakah nilai saldo lebih besar dari harga produk cek_hasil = saldo > harga_produk # kita cetak dan hasilnya adalah False # di sini kita sudah memiliki tipe data baru yaitu boolean print(cek_hasil) Kesimpulan penggunaan Boolean Boolean berperan penting mengatur flow sesuai dari business goals pada aplikasi dan website, pelajari lebih dalam tipe data ini untuk meningkatkan user experience yang baik sehingga pengguna betah menggunakan produk kita, good luck.

Memberikan corner radius pada widget image dapat membuat tampilan UI UX design menjadi lebih harmonis dikarenakan lekukan yang sederhana pada widget image tersebut. Kali ini kita akan belajar bagaimana caranya menambahkan corner radius flutter pada image dengan langkah yang mudah untuk dipelajari, let’s get started. 1) Widget image Mari kita coba bikin dummy image terlebih dahulu, kali ini asset image-nya saya ambil dari projek local, kamu juga boleh menggunakan image network yang fotonya bisa diambil dari unsplash, pixabay, atau website lainnya. Image.asset('assets/cover1.png',width: 140, height: 110,), 2) Bungkus dengan ClipRRect ClipRRect adalah class bawaan Flutter yang membantu mobile developer untuk membungkus widget lain seperti container atau image demi menambahkan sebuah rounded corner pada widget tersebut, mari kita coba tulis kodingannya seperti berikut: ClipRRect( borderRadius: const BorderRadius.only( topLeft: Radius.circular(12), topRight: Radius.circular(12), ), child: Image.asset( 'assets/cover1.png', width: 140, height: 110, ), ), Jika kita lihat kodingan di atas maka widget image yang kita miliki sebelumnya telah berhasil dibungkus oleh ClipRRect, kita juga mengatur ukuran radius tersebut kepada 12 pixel, tentunya teman-teman bisa mengatur sudut lain seperti bottomLeft atau bottomRight dengan nilai pixel yang berbeda dan sesuai kebutuhan design aplikasi kalian. Tampilan UI wajib kita perhatikan Well, sebagai flutter developer, kamu tidak harus jago UI UX design tapi setidaknya bisa meningkatkan sesuatu yang dapat membuat tampilan terlihat lebih menarik dan membuat pengguna nyaman menggunakan aplikasi kita. Selanjutnya kita bahas tutorial flutter apa lagi ya? oiya silahkan nikmati kelas flutter gratis yang tersedia di BuildWithAngga.