flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Lowongan Magang Customer Service (WFA & Paid) di BuildWithAngga

Lowongan Magang Customer Service (WFA & Paid)

Goal Membantu student dalam menemukan kelas sesuai dengan minat mereka sehingga mereka dapat mencapai karir impian setelah belajar online di buildwithangga. 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 Mempelajari produk/jasa dari buildwithanggaMembalas pesan customer via whatsapp 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 apply Benefits Free akses 1 kelas Premium bebas pilihSertifikat kelulusan magang resmi dari buildwithanggaUang kompensansi/jajan bulanan Challenge Jelaskan beberapa benefit utama yang dimiliki oleh buildwithangga dan mengapa mereka perlu mengikuti kelas-kelas buatan buildwithangga & mentor. Tulis penjelasanmu pada Google Docs lalu kirimkan file tersebut berformat .PDF melalui email di bawah ini. How to Apply Siapkan Resume (CV) & .PDF (hasil test) dengan rapihIsi body email dengan professionalIsi subject email dengan Magang CS Agustus 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 9 Agustus 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.

Kelas Cara Membuat Validasi Pada Controller Laravel di BuildWithAngga

Cara Membuat Validasi Pada Controller Laravel

Dalam konteks bahasa pemrograman, validasi mengacu pada proses memeriksa sintaks dan semantik dari kode yang ditulis dalam bahasa pemrograman tertentu untuk memastikan sesuai dengan aturan dan standar bahasa tersebut. Proses validasi membantu mengidentifikasi kesalahan, potensi bug, dan kepatuhan terhadap “Best Practice Code” sebelum kode dieksekusi atau diterapkan, sehingga mengurangi risiko perilaku yang tidak terduga dan meningkatkan kualitas kode. Di Laravel validasi mengacu pada proses memvalidasi data masukan pengguna untuk memastikan bahwa data tersebut memenuhi aturan dan persyaratan tertentu sebelum diolah oleh aplikasi. Laravel menyediakan sistem validasi yang kuat dan mudah digunakan yang membantu para pengembang mendefinisikan aturan-aturan untuk data masukan dan dengan mudah memeriksa kesalahan. Cara Membuat Validasi Pada Controller Laravel Menggunakan Validasi Di Laravel Laravel menyediakan beberapa pendekatan berbeda untuk memvalidasi data yang masuk kedalam aplikasi. Method yang paling umum digunakan adalah menggunakan metode validate yang tersedia pada semua permintaan HTTP masuk. Namun, kami juga akan membahas tentang pendekatan lainnya dalam pembuatan validasi. Laravel memiliki berbagai aturan validasi yang dapat diterapkan pada data di aplikasi anda, bahkan memiliki kemampuan untuk mengetahui apakah data yang di aplikasi merupakan data unik di tabel database tertentu. Kali ini kita akan membahas bagaimana cara membuat validasi di laravel. 1. Cara Cepat untuk Membuat Validasi di Laravel Cara Cepat Dalam Menuliskan Validasi di Laravel Untuk belajar cara menggunakan menggunakan validasi di laravel, mari kita lihat contoh membuat form validasi dan menampilkan errornya kepada user. Langkah 1: Membuat Route Disini asumsikan kalau kita memiliki route yang berada di direktori routes/web.php: use App\\Http\\Controllers\\UserController; Route::get('/user/create', [UserController::class, 'create']); Route::post('/user', [UserController::class, 'store']); Method GET akan menampilkan sebuah form untuk user untuk membuat user baru, dan Method POST akan menambahkan user baru kedalam database. Langkah 2: Membuat Controller Kemudian kita akan membuat sebuah controller yang akan menangani permintaan yang diterima oleh routes yang sudah kita buat. <?php namespace App\\Http\\Controllers; use App\\Http\\Controllers\\Controller; use Illuminate\\Http\\RedirectResponse; use Illuminate\\Http\\Request; use Illuminate\\View\\View; class UserController extends Controller { /** * Untuk menampilkan form untuk menambahkan user baru. */ public function create(): View { return view('user.create'); } /** * Untuk menangani permintaan menambah data. */ public function store(Request $request): RedirectResponse { // Validasi dan store dari user controller... $user = /** ... */ return to_route('user.show', ['user' => $user->id]); } } Langkah 3: Membuat Validasi Selanjut, kita sudah bisa mengisi store method yang sudah dibuat dengan logic untuk memvalidasi user baru yang akan ditambahkan. Kita akan menggunakan validate method yang disediakan laravel dari kelas Illuminate\\Http\\Request dan jika validasi berhasil, user baru akan ditambahkan. Namun jika validasi gagal, sebuah exception akan muncul untuk menangani error, dan tampilan error akan dikirimkan kepada user. Untuk lebih memahami apa yang sudah dijelaskan, kita bisa lihat pada store method ini: /** * Untuk menangani permintaan menambah data. */ public function store(Request $request): RedirectResponse { $validatedData = $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|email|unique:users|max:255', 'age' => 'required|integer|min:18', ]); // Process the validated data } Langkah 4: Menampilkan Tampilan Validasi Errors Kita sudah membuat validasi untuk setiap data, lalu bagaimana cara menampilkannya? Laravel memberikan kita kemudahan dalam menanganinya. Semua errors yang terjadi kita proses validasi akan menjadi sebuah Flash Data yang akan dikirim kepada sesi yang sedang dijalankan. Flash Data ini menjadi sebuah variabel $errors secara otomatis oleh laravel, yang disediakan oleh kelas Illuminate\\View\\Middleware\\ShareErrorsFromSession yang merupakan bagian dari web middleware grup yang disediakan oleh laravel. Ketika middleware diterapkan, variabel $errors akan selalu bisa di akses oleh anda, dan memungkinkan variabel errors selalu bisa digunakan dan didefinisikan. Pada contoh ini, user yang sudah menambahkan data akan diarahkan ke create method yang ada di controller yang sudah kita buat. Ketika validasi gagal, kita akan menampilkan error tersebut kedalam view: <!-- /resources/views/user/create.blade.php --> <h1>Create User</h1> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <!-- Create User Form --> Langkah 5: Memanggil Pesan Error Pada Atribut Data Kemudian kita perlu menambahkan variabel $errors kedalam setiap atribut data yang telah divalidasi. Mari kita lihat contohnya bagaimana cara menambahkannya: <!-- /resources/views/user/create.blade.php --> <label for="title">User Title</label> <input id="name" type="text" name="name" class="@error('name') is-invalid @enderror"> @error('name') <div class="alert alert-danger">{{ $message }}</div> @enderror Dengan variabel $message kita akan dapat menampilkan jika ada validasi yang gagal. 2. Membuat Validasi Menggunakan Form Request Menuliskan Validasi dengan Form Request di Laravel Form Requests merupakan sebuah kelas kustom untuk menangani validasi secara lebih spesifik. Jika kita ingin membuat validasi yang bisa dikatakan “Best Practice” kita perlu membuat kelas yang dikhususkan untuk menangani validasi tertentu. Langkah 1: Membuat Kelas Form Request Untuk membuat Form Requests kita bisa memakai method Artisan Laravel make:request didalam command line kita: php artisan make:request StoreUserRequest Kelas yang sudah dibuat, akan dimasukkan secara otomatis kedalam direktori app/Http/Requests. Langkah 2: Mendefinisikan Validasi Kemudian, buka kelas UserControllerStoreRequest.php yang sudah dibuat, anda akan menemukan rules method yang merupakan tempat untuk memasukkan logic validasi untuk data yang diterima. Asumsikan kita memiliki data name, email, dan password, kemudian validasi yang diberikan adalah sebagai berikut: namespace App\\Http\\Requests; use Illuminate\\Foundation\\Http\\FormRequest; class UserControllerStoreRequest extends FormRequest { public function rules() { return [ 'name' => 'required|string|max:255', 'email' => 'required|email|unique:users,email|max:255', 'password' => 'required|string|min:8|max:255', ]; } } Langkah 3: Menggunakan Kelas Form Request pada UserController Sekarang anda sudah membuat kelas Form Request, kita akan menggunakan validasi yang sudah dibuat didalam UserController's store method. Buka file UserController.php yang ada di direktori app/Http/Controllers. public function store(StoreRequest $request): RedirectResponse { // Permintaan yang masuk sudah divalidasi pada saat ini. // Jika data tidak memenuhi aturan yang ditentukan, Laravel akan mengembalikan respons dengan error secara otomatis. // Sekarang Anda dapat membuat pengguna baru menggunakan data yang telah divalidasi. $user = new User([ 'name' => $request->input('name'), 'email' => $request->input('email'), 'password' => bcrypt($request->input('password')), ]); // Simpan pengguna ke dalam database. $user->save(); // Kembalikan respons yang menunjukkan keberhasilan menambahd data. return redirect()->route('nama.rute.anda')->with('success', 'Pengguna berhasil dibuat');; } } Langkah 4: Menampilkan Validasi Error Sama seperti sebelumnya, kita akan memberikan validasi pada atribut data yang ada di blade. Dengan begitu user dapat melihat kesalahan dan memperbaikinya. Contohnya kita akan memberikan atribut data name di blade untuk divalidasi: <input type="text" name="name" class="@error('name') border-red-500 @enderror"> @error('name') <div class="text-red-500">{{ $message }}</div> @enderror Kesimpulan Validasi data masukan dari pengguna sangat penting untuk memastikan bahwa data yang diterima sesuai dengan aturan yang telah ditentukan sebelum diproses lebih lanjut. Dengan mengimplementasikan validasi menggunakan Form Request, kita dapat memastikan bahwa data yang masuk ke sistem telah melewati berbagai aturan validasi dan aman untuk digunakan. Jika ingin belajar lebih banyak mengenai laravel, di BuildWithAngga kita menyediakan Kelas Online bagi anda yang ingin menguasai laravel. Bagi anda yang pemula dan ingin belajar laravel, kita punya Tips untuk belajar laravel bagi pemula. Di BuildWithAngga juga kita punya Kelas yang yang mudah untuk dipahami oleh pemula. Dengan belajar di platform BuildWithAngga anda juga dapat menambah portofolio dan menambah ilmu untuk memulai karir dibidang ini. Karena dari BuildWithAngga, #semuabisabelajar

Kelas [CLOSED] Lowongan Magang Content Editor (WFA & Dibayar) di BuildWithAngga

[CLOSED] Lowongan Magang Content Editor (WFA & Dibayar)

Goal Membagikan tips melaui artikel untuk membantu orang-orang mempelajari skills yang dibutuhkan oleh perusahaan saat ini sehingga mereka lebih mudah mencapai karir impiannya ke depannya nanti. 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 Menulis artikel tentang ui ux design dan web developmentMembuat outline postingan instagram Bekerja sama dengan graphic designer 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 BWA Benefits Free akses 1 kelas Premium bebas pilihSertifikat kelulusan magang resmi dari buildwithanggaUang kompensansi/jajan bulanan Challenge Tulis artikel sederhana terkait rekomendasi kelas gratis di BuildWithAngga, jelaskan benefit dari kelas tersebut dan materi apa saja yang akan dipelajari, minimal menggunakan 500 kata. Tulis artikel tersebut pada Notion.so dan jadikan dokumen tersebut menjadi publik sehingga dapat diakses oleh siapa saja termasuk tim buildwithangga. How to Apply Siapkan Resume (CV) & link dokumen Notion.so (hasil test) dengan rapihIsi body email dengan hasil test di atasIsi subject email dengan Magang Content Editor Agustus 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 3 Agustus 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.

Kelas Top 7 Pekerjaan Freelancer di Upwork di BuildWithAngga

Top 7 Pekerjaan Freelancer di Upwork

Buat kamu yang pengen merasakan kebebasan dalam bekerja dan mengejar karier tanpa terikat dengan kantor, menjadi freelancer bisa jadi pilihan yang tepat. Salah satu platform freelance terbesar yang bisa kamu coba adalah Upwork. Di sini, kamu bisa menemukan berbagai pekerjaan menarik dari berbagai bidang. Nah, kali ini penulis mau kasih info tentang top 7 pekerjaan freelancer populer di Upwork. Top 7 Pekerjaan Freelancer di Upwork Seiring dengan kemajuan teknologi dan perkembangan internet, cara kerja dan dunia pekerjaan mengalami transformasi besar. Salah satu fenomena yang telah merubah lanskap pekerjaan adalah hadirnya platform online seperti Upwork. Upwork merupakan salah satu platform freelance terkemuka yang mempertemukan para freelancer dengan para klien yang membutuhkan jasa profesional di berbagai bidang. Upwork telah menjadi salah satu platform terbesar dalam industri freelancing dengan ribuan proyek yang ditawarkan setiap harinya Freelancer apply job di situs Upwork Upwork didirikan dengan tujuan untuk menyederhanakan proses perekrutan dan kerjasama antara pekerja independen dengan klien global. Platform ini menyediakan layanan jasa yang beragam, seperti desain grafis, copy writer, developer, penerjemahan, digital marketing, dan banyak lagi. Bagaimana Peluang dan Tantangan Bekerja di Situs Upwork? Bagi para freelancer, Upwork menawarkan kesempatan untuk memperluas jangkauan klien mereka di seluruh dunia tanpa terikat oleh batasan geografis. Freelancer dapat membuat profil pribadi, mengunggah portofolio, dan menawarkan jasa mereka kepada klien dari berbagai negara. Sebagai freelancer, Upwork juga memberikan fleksibilitas dalam menentukan jam kerja dan lingkup proyek yang ingin diambil. Sementara itu, bagi para klien, Upwork mempermudah proses pencarian ahli dan profesional dalam berbagai bidang. Mereka dapat meninjau profil freelancer, melihat ulasan dari klien sebelumnya, dan berkomunikasi secara langsung untuk menentukan apakah freelancer tersebut sesuai dengan kebutuhan proyek yang diinginkan. Profesi freelancer Upwork bekerja dari rumah Salah satu fitur utama dari Upwork adalah sistem pembayaran yang aman dan terpercaya. Upwork memfasilitasi pembayaran antara klien dan freelancer melalui platformnya sendiri, sehingga mengurangi risiko penipuan dan masalah pembayaran. Seperti halnya platform lainnya, ada tantangan dan persaingan di Upwork. Persaingan yang ketat membutuhkan upaya ekstra dalam menawarkan keterampilan unik, mengembangkan portofolio yang kuat, dan membangun reputasi positif untuk berhasil di platform ini. Namun jangan khawatir, kamu punya peluang besar untuk sukses freelance di Upwork asal kamu paham dengan skill dan kemampuanmu. Rekomendasi Top Career Incaran Klien di Upwork Terdapat beberapa bidang karier yang paling diminati oleh klien di Upwork, dan sebagai freelancer, mengejar karier-karier ini dapat meningkatkan peluang kamu untuk mendapatkan proyek dan klien yang lebih banyak. Berikut adalah beberapa rekomendasi top career incaran klien di Upwork. 1. Content Writer Content Writer menyusun ide konten untuk project freelance dari Upwork Jika kamu punya kemampuan menulis yang bagus, pekerjaan sebagai Content Writer sangat melimpah di Upwork. Mulai dari artikel blog, konten web, hingga copywriting untuk iklan online. Dengan semakin banyak perusahaan dan bisnis yang beralih ke strategi pemasaran digital, permintaan akan penulis konten yang berkualitas terus meningkat. Selain itu, kesempatan untuk menjadi seorang copywriter juga sangat menjanjikan dengan gaji nya yang fantastis dapat mencapai $25 - $45 perjam. Untuk sukses dalam karier penulisan di Upwork, pastikan kamu selalu mengasah kemampuan menulis melalui pelatihan dan pembelajaran terus-menerus. Jangan lupa untuk selalu update trend teknologi terkini ya! 2. Graphic Designer Graphic Designer mengerjakan project desain dari Upwork Desain grafis juga termasuk salah satu bidang yang diminati banyak orang di dunia freelancing. Kamu bisa mendapatkan proyek-proyek desain logo, brosur, poster, atau bahkan desain UI/UX aplikasi. Gaji untuk pekerjaan Graphic Designer di Upwork berkisar dari $10 - $80 per jam. Jika kamu memiliki keahlian dalam Adobe Photoshop, Illustrator, atau alat desain lainnya, maka kamu dapat menjelajahi berbagai proyek menarik di Upwork. Memiliki portofolio yang kuat yang mencerminkan kualitas dan kreativitas desain kamu akan membantu menarik perhatian calon klien. 3. Webflow Profesi Webflow Developer di Upwork Dalam era digital seperti sekarang ini permintaan akan web developer semakin tinggi. Banyak perusahaan mencari professional ini untuk membangun dan mengelola situs mereka. Jenis pekerjaan yang melibatkan penggunaan platform Webflow untuk merancang, membangun, dan mengelola situs web. Webflow adalah sebuah platform web design yang memungkinkan pengguna untuk membuat situs web responsif tanpa harus menulis kode secara manual. Keterampilan untuk memahami kebutuhan klien, merancang situs yang responsif dan menarik, serta kemampuan untuk menyelesaikan proyek sesuai deadline adalah faktor kunci untuk membangun reputasi yang baik sebagai Webflow Developer yang handal. Gaji untuk seorang freelancer Webflow di Upwork dapat bervariasi dari $25 - $100 per jam. 4. UI/UX Designer Berkarir sebagai UI/UX freelancer di Upwork UI/UX designer di Upwork, kamu dapat terlibat dalam berbagai jenis proyek, termasuk desain situs web, aplikasi seluler, produk digital, game, dan banyak lagi. Diversitas ini memungkinkan kamu untuk terus berkembang dan mencoba hal-hal baru. Seorang UI/UX Designer bertanggung jawab untuk merancang antarmuka aplikasi atau website serta memberikan pengalaman yang nyaman bagi para penggunanya. Sebagai desainer UI/UX yang berkualitas, kamu dapat menetapkan tarif yang sesuai dengan kemampuan dan pengalamanmu. Dengan mendapatkan proyek-proyek berkualitas, potensi penghasilan kamu di Upwork juga dapat meningkat. Gaji untuk pekerjaan UI/UX Designer di Upwork dapat bervariasi dari $15 - $100 per jam. 5. Digital Marketing Bekerja sebagai freelancer Digital Marketing di Upwork Seiring dengan berkembangnya bisnis online dan media sosial marketing, pekerjaan sebagai Digital Merketing semakin diperlukan oleh perusahaan. Banyak perusahaan menyadari bahwa strategi pemasaran digital adalah kunci untuk mencapai audiens yang lebih luas dan menarik pelanggan potensial secara efektif. Kamu bisa menawarkan jasa SEO, manajemen media sosial, atau periklanan online. Gaji untuk pekerjaan Digital Marketing di Upwork dapat bervariasi dari $10 - $60 per jam. 6. Translator Freelancer Translator di Upwork Jika kamu fasih dalam beberapa bahasa asing, menjadi translator freelance juga merupakan pilihan yang baik di Upwork karena ada banyak klien internasional yang membutuhkan layanan tersebut. Sebagai translator di platform ini, kamu akan memiliki peluang untuk bekerja dengan beragam proyek, mulai dari penerjemahan dokumen bisnis, materi pemasaran, hingga konten website. Menerjemahkan konten dengan akurat dan menyesuaikan dengan bahasa dan budaya target adalah kunci untuk memenangkan kepercayaan klien dan membangun reputasi yang baik. Gaji seorang translator di Upwork dapat bervariasi dari $20 - $60 per jam. 7. Data Entry Profesi sebagai Data Entry di Upwork Pekerjaan ini sering kali mencakup tugas seperti menginput informasi dari sumber tertentu, mengorganisir data, melakukan entri data dari formulir fisik atau digital, serta melakukan verifikasi dan pemutakhiran data. Sebagai seorang data entry freelancer di Upwork, kamu akan menemukan berbagai kesempatan untuk bekerja dengan klien dari berbagai industri dan sektor. Klien sering mencari data entry freelancer yang dapat memberikan ketelitian dan kecepatan dalam mengolah data mereka. Penting untuk memiliki keterampilan penggunaan perangkat lunak spreadsheet seperti Microsoft Excel atau Google Sheets, serta keahlian dalam mengenali dan mengatasi kesalahan atau ketidaksesuaian data. Gaji untuk seorang freelancer Data Entry di Upwork dapat bervariasi dari $5 - $20 per jam. Tips dan Trik Mendapat Pekerjaan Pertama di Upwork Freelancer mengerjakan project dari Upwork Mendapatkan pekerjaan pertama di Upwork sebagai freelancer bisa menjadi tantangan, terutama jika kamu baru bergabung dengan platform ini dan belum membangun reputasi atau ulasan. Berikut adalah beberapa tips dan trik yang dapat membantu kamu mendapatkan pekerjaan pertama di Upwork: Profil yang Menarik: Buatlah profil yang menarik dan profesional dengan menggambarkan keahlian kamu dengan jelas. Sertakan deskripsi singkat tentang dirimu, pengetahuan, dan pengalaman yang relevan.Pilih Nicha Spesifik: Fokus pada bidang tertentu atau niche yang sesuai dengan keahlian kamu. Memiliki niche yang jelas akan membantu kamu menarik klien yang mencari keterampilan khusus yang kamu tawarkan.Persiapkan Portfolio yang kuat: Unggah portofolio yang mencerminkan kualitas dan memamerkan skill kamu. Portofolio dapat membantu calon klien melihat contoh pekerjaan sebelumnya dan meningkatkan kepercayaan mereka pada kemampuanmu.Proposal yang Personal: Hindari mengirimkan proposal yang generik. Setiap proposal harus disesuaikan dengan proyek yang kamu lamar. Jelaskan bagaimana kamu akan menyelesaikan proyek dengan solusi yang tepat dan menunjukkan kamu Anda pada pekerjaan tersebut.Gunakan Kata Kunci yang Relevan: Saat menulis profil dan proposal, gunakan kata kunci yang relevan dengan keahlian kamu. Ini akan membantu kamu lebih mudah ditemukan oleh calon klien yang mencari jasa yang sesuai.Kirimkan Banyak Proposal: Jangan ragu untuk mengirimkan banyak proposal untuk berbagai proyek yang sesuai dengan keahlian Anda. Semakin banyak proposal yang kamu kirimkan, semakin besar peluang untuk mendapatkan pekerjaan pertama.Tetap Konsisten dan Sabar: Mendapatkan pekerjaan pertama bisa memakan waktu, tetapi jangan menyerah. Tetap konsisten dalam mencari pekerjaan, perbarui profil dan portofolio kamu, dan selalu upgrade skillmu. Kesimpulan Nah, itulah top 7 pekerjaan freelance populer yang ada di Upwork. Pastikan kamu memilih pekerjaan yang sesuai dengan minat dan keahlianmu agar dapat sukses dalam karier freelancingmu! Ingat, jangan lupa juga untuk terus mengembangkan kemampuan dan meningkatkan portofolio kerjamu supaya semakin diminati oleh klien-klien potensial. Kamu kini dapat mempelajari hal seputar Upwork dengan mengikuti kelas dari BuildWithAngga Upwork Freelancer Mastery: Strategi Terbukti 100 Juta Pertama. Daftar sekarang dan mulailah langkah baru menuju karier yang sukses sebagai freelancer di Upwork!

Kelas 5 Package Laravel Terbaik Untuk Web Developer di BuildWithAngga

5 Package Laravel Terbaik Untuk Web Developer

Laravel merupakan Framework PHP yang sangat populer dan banyak digunakan oleh para developer untuk membangun sebuah aplikasi website. Laravel memungkinkan para developer untuk mengurangi kompleksitas dalam proyek-proyek web seperti sessions, routing, authentication, dan caching, yang menawarkan pembuatan aplikasi pada lingkungan sederhana dengan kemampuan prosesnya yang sangat baik. Dengan segala “keajaiban” yang dimiliki laravel, framework ini tidak pernah mengorbankan kualitas selama pengembangannya untuk memfasilitasi para developer. 5 Package Laravel Terbaik Untuk Web Developer Laravel package merupakan sebuah modul dengan yang dibuat oleh seseorang ataupun golongan, berisikan sintaks untuk menjalankan suatu proses pada batasan tertentu Laravel menawarkan fungsionalitas dan kemudahan bagi para developer yang mengembang aplikasi yang di desain secara khusus. Pada kesempatan kali ini kita akan membahas package yang ada di laravel. Laravel package merupakan sebuah modul dengan batasan tertentu dalam fungsinya didalam laravel. Sebuah package dalam laravel akan selalu ditest saat dijalankan, hal ini diperlukan karena package terkadang mengeluarkan versi terbaru, oleh karena itu laravel selalu mengecek apakah package yang ada di aplikasi anda sudah up-to-date dengan versi yang terbaru. Laravel menyediakan kemudahan dalam mengelola package-package yang ada dalam proses pengembangan website laravel. Ini memungkinkan seorang developer dapat menginstal dengan mudah melalui composer dan secara otomatis mendaftarkannya dalam penyedia layanan dan modul eksternal. Ada Package Apa Saja yang Dimiliki oleh Laravel? Sekarang ini laravel menawarkan lebih dari 500+ package yang mempunyai fungsi-fungsi yang berbeda untuk beragam industri seperti eCommerce, start-up, Digital Marketing, dan di berbagai industri lainnya. Laravel mempunyai 2 macam tipe package, yaitu Framework Packages yang bisa dipakai oleh laravel dan frameworks PHP lainnya, kemudian ada Laravel Specific Packages merupakan package yang diciptakan khusus untuk laravel. Pada kesempatan kali ini, kita akan membahas 5 Package Laravel Terbaik Untuk Developer, kemudian bagaimana cara instalasi dan penggunaannya. Tapi sebelum itu anda perlu menginstall composer terlebih dahulu, agar meingstall package yang anda inginkan jauh lebih mudah. 1. Laravel Spatie Permission Laravel Spatie Package merupakan sebuah Open Source Package Laravel Spatie Permissions adalah sebuah package yang dibuat oleh tim Spatie untuk menyediakan sistem manajemen izin dan peran (role) yang mudah digunakan dalam aplikasi Laravel. Package ini memungkinkan pengembang untuk mengatur secara rapih izin-izin yang diberikan kepada pengguna (user) berdasarkan peran yang mereka miliki. Fitur utama dari Laravel Spatie Permissions adalah sebagai berikut: Manajemen Peran: Package ini memungkinkan Anda untuk dengan mudah membuat, mengedit, dan menghapus peran-peran yang ada dalam aplikasi Anda. Peran ini dapat mewakili berbagai tingkatan akses, seperti "Admin", "Pengguna Biasa", atau peran-peran kustom sesuai kebutuhan aplikasi Anda.Manajemen Izin: Dalam Laravel Spatie Permissions, Anda dapat mendefinisikan berbagai izin yang dapat diberikan kepada setiap peran. Misalnya, izin untuk "Membuat", "Mengedit", atau "Menghapus" entitas tertentu dalam aplikasi Anda.Penugasan Peran: Anda dapat dengan mudah menugaskan satu atau lebih peran kepada setiap pengguna dalam aplikasi. Dengan cara ini, Anda dapat dengan cepat mengatur tingkatan akses pengguna berdasarkan peran yang mereka miliki.Pemeriksaan Izin: Laravel Spatie Permissions menyediakan beragam metode untuk memeriksa izin yang dimiliki oleh pengguna saat aplikasi sedang berjalan. Anda bisa menggunakan metode ini untuk menentukan apakah pengguna memiliki izin untuk melaksanakan tindakan tertentu dalam aplikasi.Pengelompokkan Izin: Package ini memungkinkan Anda untuk mengelompokkan izin-izin ke dalam kategori-kategori tertentu. Dengan cara ini, Anda dapat mengatur dan mengelompokkan izin-izin dengan lebih terstruktur.Penerapan Sederhana: Salah satu keunggulan Laravel Spatie Permissions adalah penerapannya yang mudah dan cepat. Package ini menyediakan beragam metode yang intuitif untuk mengatur peran dan izin dalam kode Anda. Untuk mengimplementasikan Laravel Spatie kedalam aplikasi Laravel Anda, berikut ini adalah langkah-langkah implementasi laravel spatie: Langkah 1: Instalasi Package Buka terminal, dan masuk ke direktori aplikasi Laravel Anda. Kemudian, jalankan perintah berikut untuk menginstal package Laravel Spatie Permissions melalui Composer: composer require spatie/laravel-permission Langkah 2: Konfigurasi Provider dan Alias Setelah package diinstal, buka file config/app.php kemudian pastikan Anda telah mendaftarkan provider dan alias package ini. Periksa apakah baris berikut ada di dalam array providers: 'providers' => [ // ... Spatie\\Permission\\PermissionServiceProvider::class, ], Kemudian pastikan baris berikut juga ada di dalam array aliases: 'aliases' => [ // ... 'Permission' => Spatie\\Permission\\Models\\Permission::class, ], Langkah 3: Migrasi Database Selanjutnya, Anda perlu membuat tabelyang diperlukan oleh Laravel Spatie. Jalankan perintah migrasi berikut untuk membuat tabel roles, permissions, dan tabel pivot model_has_roles, model_has_permissions, serta role_has_permissions: php artisan migrate Langkah 4: Periksa Model User Kemudian, pastikan model User Anda menggunakan trait HasRoles dari package ini. Buka file app/Models/User.php, dan tambahkan trait berikut: use Spatie\\Permission\\Traits\\HasRoles; class User extends Authenticatable { use HasFactory, Notifiable, HasRoles; // ... } Langkah 5: Mendefinisikan Peran dan Izin Anda dapat mendefinisikan peran dan izin yang ingin Anda berikan kepada user dalam aplikasi. Ini biasanya dilakukan pada saat seeding atau dalam file DatabaseSeeder.php. Contohnya, Anda dapat menambahkan kode berikut di dalam method run(): use Spatie\\Permission\\Models\\Role; use Spatie\\Permission\\Models\\Permission; // Membuat peran "Admin" $adminRole = Role::create(['name' => 'admin']); // Membuat izin "Membuat Artikel" $createArticlePermission = Permission::create(['name' => 'create article']); // Menugaskan izin ke peran "Admin" $adminRole->givePermissionTo($createArticlePermission); Langkah 6: Penggunaan Sintaks pada Aplikasi Setelah Anda mendefinisikan peran dan izin pada user, Anda dapat menggunakan Laravel Spatie Permissions untuk melakukan pemeriksaan izin dan menugaskan peran kepada pengguna dalam kode aplikasi Anda. Contoh Untuk Pemeriksaan Izin: if ($user->hasPermissionTo('create article')) { // Pengguna memiliki izin "Membuat Artikel" // Lakukan tindakan yang diizinkan di sini } else { // Pengguna tidak memiliki izin "Membuat Artikel" // Tangani akses yang tidak diizinkan } Contoh Penugasan Peran ke Pengguna: $user->assignRole('admin'); Anda juga dapat mencopot peran dari pengguna menggunakan metode removeRole(). Selengkapnya tentang penggunaan Laravel Spatie Permissions dapat ditemukan di dokumentasi resmi package ini. 2. Laravel Ignition Laravel Ignition akan memberikan halaman tampilan yang lebih interaktif dan menarik untuk proses debugging. Laravel Ignition adalah sebuah package yang dibuat oleh tim Laravel untuk memperbaiki dan memperbanyak pengalaman dalam penanganan error serta proses debugging dalam aplikasi Laravel. Package ini menyediakan halaman error interaktif yang sangat informatif, yang memberikan informasi rinci tentang exceptions dan error yang terjadi selama aplikasi berjalan. Fitur utama dari Laravel Ignition meliputi: Interactive Error Page: Ignition menggantikan halaman error default Laravel dengan halaman error yang interaktif dan mudah digunakan. Halaman ini tidak hanya menampilkan pesan error, tetapi juga menyediakan stack trace, code snippets kontekstual, dan informasi relevan lainnya untuk membantu developer dengan cepat mendiagnosis dan memperbaiki masalah.Solution Suggestions: Ketika sebuah “exception” terjadi, Ignition dapat memberikan saran solusi untuk masalah umum berdasarkan jenis exception dan konteksnya. Fitur ini bertujuan membantu developer dalam menyelesaikan masalah dengan lebih efisien.Shareable Links: Ignition memungkinkan Anda untuk membuat tautan yang dapat dibagikan ke halaman error tertentu. Fitur ini sangat berguna ketika Anda ingin berkolaborasi dengan anggota tim atau meminta bantuan dari komunitas Laravel.Environment Insights: Ignition menyediakan informasi berharga tentang lingkungan aplikasi Anda, termasuk layanan yang dimuat, paket yang diinstal, rincian konfigurasi, dan lain-lain.Support for 3rd-party Packages: Ignition berkompatibilitas dengan aplikasi Laravel yang menggunakan package pihak ketiga. Package ini dapat berintegrasi dengan lancar dengan package Laravel populer lainnya.Custom Error Cards: Anda dapat membuat Custom Error Cards dalam Ignition untuk menangani jenis exceptions tertentu, dengan memberikan instruksi dan solusi khusus untuk skenario error yang berbeda. Laravel Ignition dikembangkan dan dijaga oleh tim resmi Laravel, sehingga package ini mendapat dukungan yang baik dan selalu diperbarui sesuai dengan rilis terbaru Laravel. Ini adalah tambahan yang sangat baik untuk setiap proyek Laravel, terutama bagi para pengembang yang ingin meningkatkan kemampuan debugging dan penanganan error dalam aplikasi mereka. Langkah 1: Instalasi Package Buka terminal atau command prompt, arahkan ke direktori aplikasi Laravel Anda, lalu jalankan perintah berikut untuk menginstal package Laravel Ignition menggunakan Composer: composer require facade/ignition Langkah 2: Publish Assets (Opsional) Anda dapat mempublikasikan aset-aset Ignition secara opsional untuk menyesuaikan tampilan halaman error. Untuk melakukannya, jalankan perintah berikut: php artisan vendor:publish --tag=ignition-assets Perintah ini akan mempublikasikan aset-aset Ignition ke direktori public dalam aplikasi Anda, sehingga Anda dapat mengubah tampilan CSS dan aset lainnya sesuai desain aplikasiAnda. Langkah 3: Verifikasi Konfigurasi (Opsional) Secara default, Laravel Ignition seharusnya sudah siap digunakan setelah diinstal. Namun, jika Anda ingin mengonfigurasi atau menyesuaikan beberapa pengaturan, Anda dapat mempublikasikan file konfigurasi Ignition: php artisan vendor:publish --tag=ignition-config Perintah ini akan membuat file ignition.php di direktori config Anda, sehingga Anda dapat menyesuaikan berbagai pengaturan sesuai kebutuhan Langkah 4: Memulai Debugging Dengan Laravel Ignition sudah terinstal, Anda tidak perlu melakukan apa pun tambahan untuk mengaktifkannya. Setiap kali terjadi kesalahan atau exception selama aplikasi berjalan, Laravel Ignition secara otomatis akan menangkapnya dan menampilkan halaman kesalahan interaktif dengan informasi debugging yang bermanfaat, berikut adalah contoh langkah-langkah untuk memulai debugging dengan menggunakan Laravel Ignition: Misalkan Anda memiliki aplikasi Laravel yang memiliki route untuk menampilkan daftar artikel: Buka file web.php yang berada di direktori routes pada proyek Laravel Anda.Tambahkan rute berikut: use Illuminate\\Support\\Facades\\Route; Route::get('/articles', function () { // Sebuah kesalahan sengaja dibuat untuk contoh debugging $articles = null; return view('articles.index', compact('articles')); }); Pada kode di atas, kita mengeksekusi route /articles yang mengambil daftar artikel $articles dan mengirimnya ke view articles.index. Namun, kita dengan sengaja mengatur variabel $articles menjadi null untuk menimbulkan kesalahan. Selanjutnya, buka halaman /articles di browser Anda (misalnya, http://localhost:8000/articles).Setelah mengakses halaman tersebut, Anda akan melihat bahwa Laravel Ignition akan menangkap error dan menampilkan halaman error yang interaktif.Halaman error akan menampilkan informasi lengkap tentang kesalahan, termasuk pesan error, stack trace, dan konteks kode yang menyebabkan kesalahan. Informasi ini akan sangat membantu Anda dalam proses debugging untuk menemukan penyebab kesalahan tersebut.Jika Ignition mengenali kesalahan yang umum, halaman kesalahan juga akan memberikan saran solusi untuk masalah yang mungkin telah terjadi. Dengan begitu, Anda dapat dengan mudah menganalisis dan menyelesaikan masalah pada kode Anda langsung dari halaman kesalahan yang disediakan oleh Laravel Ignition. Hal ini akan memudahkan proses debugging dan membantu Anda mengidentifikasi dan memperbaiki masalah dengan lebih cepat dan efisien. Perlu diingat bahwa Laravel Ignition lebih ditujukan untuk digunakan selama tahap pengembangan dan debugging, dan sebaiknya dimatikan di produksi karena alasan keamanan. Anda dapat melakukannya dengan mengatur variabel lingkungan IGNITION_ENABLED menjadi false di lingkungan produksi. 3. Laravel DebugBar Laravel DebugBar adalah package yang dikembangkan oleh Barry vd. Heuvel untuk aplikasi Laravel yang menyediakan debugging dan profiling toolbar yang sangat berguna. Package ini menawarkan wawasan mendalam tentang performa aplikasi, query dalam database, tampilan yang menarik, informasi route, dan masih banyak lagi. Laravel DebugBar meningkatkan pengalaman debugging bagi para developer, sehingga memudahkan dalam mengoptimalkan dan menyelesaikan masalah dalam aplikasi yang dibuat di Laravel. Fitur utama dari Laravel DebugBar meliputi: Debug Toolbar: Laravel DebugBar mengintegrasikan toolbar yang interaktif dan mudah digunakan di bagian bawah halaman aplikasi Anda selama dalam mode pengembangan. Toolbar ini menampilkan berbagai informasi debug, seperti query, waktu eksekusi, penggunaan memori, dan logs.Database Query Debugger: Package ini menangkap dan menampilkan semua query database yang dibuat oleh aplikasi Anda. Ini mencakup SQL statements yang dieksekusi, waktu yang dibutuhkan untuk setiap query, dan jumlah query yang dieksekusi. Fitur ini membantu mengidentifikasi potensi permasalahan performa dan mengoptimalkan interaksi dengan database.View Debugger: Laravel DebugBar menampilkan informasi tentang tampilan yang dirender, termasuk waktu yang dibutuhkan untuk merender setiap tampilan, data yang dikirimkan ke tampilan, dan direktori dari tampilan. Fitur ini membantu menemukan masalah yang terkait dengan tampilan dan mengidentifikasi performa render tampilan.Route Information: Package ini menyediakan detail tentang route saat ini, seperti URI, middleware yang digunakan, dan controller/method yang menangani permintaan. Ini membantu melacak alur route selama eksekusi aplikasi.Timeline: Fitur Timeline pada DebugBar menampilkan timeline dari berbagai peristiwa dalam aplikasi, seperti query database, render tampilan, dan kode yang dieksekusi. Ini memungkinkan Anda untuk memvisualisasikan urutan peristiwa dan memahami waktu eksekusinya.Log Messages: Laravel DebugBar menangkap pesan log dari aplikasi Anda dan menampilkannya di toolbar. Ini memudahkan untuk memeriksa keluaran log langsung dari browser dan memantau log aplikasi.Collectors: DebugBar memungkinkan Anda menambahkan collector kustom untuk mengumpulkan dan menampilkan informasi tambahan yang khusus untuk aplikasi Anda. Ini membuat toolbar dapat diperluas dengan data debugging yang dipersonalisasikan. Langkah 1: Instalasi Package Buka terminal atau command prompt, arahkan ke direktori aplikasi Laravel Anda, lalu jalankan perintah berikut untuk menginstal package Laravel DebugBar menggunakan Composer: composer require barryvdh/laravel-debugbar --dev Package ini harus ditambahkan sebagai dependensi develop (dengan flag --dev) agar hanya diaktifkan saat dalam mode develop. Langkah 2: Verify Configuration (Optional) Laravel DebugBar biasanya bekerja tanpa perlu konfigurasi tambahan. Namun, jika Anda ingin menyesuaikan beberapa pengaturan, Anda dapat mempublikasikan file konfigurasi package untuk melakukan penyesuaian: php artisan vendor:publish --provider="Barryvdh\\Debugbar\\ServiceProvider" Perintah ini akan membuat file konfigurasi debugbar.php di direktori config Anda. Anda dapat mengubah file ini sesuai dengan kebutuhan khusus Anda. Langkah 3: Enable the DebugBar (Optional) Secara default, Laravel DebugBar secara otomatis diaktifkan di lingkungan develop. Namun, jika Anda ingin mengaktifkannya atau menonaktifkannya secara manual, Anda dapat melakukannya dengan menggunakan pernyataan kondisional di dalam AppServiceProvider atau provider layanan lain yang relevan. Contohnya, Anda dapat menggunakan kode berikut di dalam AppServiceProvider untuk mengaktifkan DebugBar berdasarkan lingkungan aplikasi Anda: use Barryvdh\\Debugbar\\Facade as Debugbar; public function boot() { if (config('app.debug')) { Debugbar::enable(); } } Langkah 4: Start Debugging Berikut adalah contoh langkah-langkah untuk memulai debugging menggunakan Laravel DebugBar: Misalkan Anda memiliki aplikasi Laravel dengan route untuk menampilkan daftar artikel dan ingin memeriksa waktu eksekusi dan query database yang terjadi saat halaman daftar artikel diakses. Buka file web.php yang berada di direktori routes pada proyek Laravel Anda.Tambahkan routes berikut: use Illuminate\\Support\\Facades\\Route; use App\\Models\\Article; Route::get('/articles', function () { // Memulai DebugBar untuk mengumpulkan data debugging \\Debugbar::startMeasure('render', 'Render Time'); \\Debugbar::startMeasure('query', 'Database Queries'); // Mengambil daftar artikel dari database $articles = Article::all(); // Mengakhiri pengukuran waktu eksekusi untuk render dan kueri database \\Debugbar::stopMeasure('render'); \\Debugbar::stopMeasure('query'); return view('articles.index', compact('articles')); }); Pada kode di atas, dengan menggunakan \\Debugbar::startMeasure() untuk memulai pengukuran waktu eksekusi untuk menampilkan tampilan dan query database. Kemudian, setelah mengambil daftar artikel dari database, kita menggunakan \\Debugbar::stopMeasure() untuk menghentikan pengukuran waktu. Buka halaman /articles di browser Anda (misalnya, http://localhost:8000/articles).Setelah membuka halaman tersebut, buka DebugBar dengan mengklik ikon panah di bagian bawah layar. Anda akan melihat tab "Render Time" dan "Database Queries".Tab "Render Time" akan menampilkan waktu eksekusi untuk menampilkan tampilan halaman daftar artikel, dan tab "Database Queries" akan menampilkan kueri-kueri database yang dijalankan untuk mengambil daftar artikel dari database. Dengan begitu, Anda dapat dengan mudah melihat berapa lama waktu yang dibutuhkan untuk menampilkan tampilan dan berapa banyak query database yang dijalankan saat mengakses halaman daftar artikel. Informasi ini sangat berguna untuk mengidentifikasi potensi permasalahan performa dan memperbaikinya jika diperlukan. Selalu diingat bahwa penting untuk menonaktifkan Laravel DebugBar di lingkungan production untuk menghindari pengungkapan informasi sensitif dan menjaga keamanan aplikasi. Anda dapat melakukannya dengan memperbarui konfigurasi atau menggunakan pernyataan kondisional untuk mengaktifkan package ini hanya di lingkungan develop saja. 4. Laravel Socialite Laravel Socialite menyederhanakan untuk menintegrasikan akun sosial media pengguna dengan aplikasi laravel anda Laravel Socialite adalah package populer yang memudahkan proses integrasi autentikasi sosial (OAuth) ke dalam aplikasi Laravel. Package ini menyediakan cara yang mudah dan konsisten untuk authenticate users menggunakan berbagai platform media sosial, seperti Facebook, Twitter, Google, GitHub, dan banyak lainnya. Dengan Laravel Socialite, Anda dapat memungkinkan pengguna masuk atau mendaftar ke aplikasi Anda menggunakan akun media sosial mereka. Fitur utama dari Laravel Socialite meliputi: Unified API: Laravel Socialite menawarkan API yang sederhana dan mudah untuk autentikasi pengguna di berbagai platform media sosial. Package ini menyembunyikan kompleksitas proses OAuth, sehingga Anda dapat mengintegrasikan dengan berbagai platform media sosial tanpa perlu memikirkan detail implementasi yang spesifik.Easy Configuration: Pengaturan autentikasi media sosial menjadi sederhana dengan Laravel Socialite. Anda hanya perlu mendaftarkan aplikasi Anda dengan platform media sosial yang bersangkutan untuk mendapatkan ID dan berbagai informasi rahasia yang dibutuhkan, lalu mengkonfigurasikannya di aplikasi Laravel Anda.User Data Retrieval: Socialite menangani proses pertukaran token akses dengan platform media sosial untuk mengambil detail pengguna seperti nama, email, gambar profil, dan lainnya. Data ini dapat digunakan untuk autentikasi pengguna di dalam aplikasi Anda.Fluent API: Socialite menyediakan API yang mudah digunakan untuk berinteraksi dengan berbagai media sosial. Anda dapat memulai alur autentikasi, mengarahkan pengguna ke halaman login media sosial, dan menangani callback setelah autentikasi berhasil dengan sintaks yang bersih dan intuitif.Multiple Providers: Laravel Socialite mendukung banyak penyedia media sosial secara default, dan Anda dapat dengan mudah menambahkan media sosial lain untuk mengintegrasikan dengan aplikasi jika diperlukan. Untuk menggunakan Laravel Socialite, ikut langkah-langkah berikut ini: Langkah 1: Menginstal Package Buka terminal atau command prompt, masuk ke direktori aplikasi Laravel Anda, dan jalankan perintah berikut untuk menginstal package Laravel Socialite menggunakan Composer: composer require laravel/socialite Langkah 2: Mengkonfigurasi Penyedia Media Sosial Selanjutnya, Anda perlu mengkonfigurasi penyedia media sosial yang ingin Anda gunakan di file config/services.php. Sebagai contoh, untuk mengkonfigurasi Facebook: 'facebook' => [ 'client_id' => env('FACEBOOK_CLIENT_ID'), 'client_secret' => env('FACEBOOK_CLIENT_SECRET'), 'redirect' => env('FACEBOOK_REDIRECT_URI'), ], Langkah 3: Mengimplementasikan Laravel Socialite Di dalam aplikasi Anda, Anda dapat menggunakan Socialite untuk memulai alur autentikasi dan menangani callback setelah autentikasi berhasil. Sebagai contoh: use Laravel\\Socialite\\Facades\\Socialite; // Mengalihkan pengguna ke halaman login Facebook public function redirectToProvider() { return Socialite::driver('facebook')->redirect(); } // Menangani callback setelah Facebook mengotentikasi pengguna public function handleProviderCallback() { $user = Socialite::driver('facebook')->user(); // Proses data pengguna dan masuk atau mendaftar pengguna } Dengan langkah-langkah sederhana ini, Anda dapat dengan mudah mengimplementasikan Laravel Socialite di aplikasi Laravel Anda. Package ini menyederhanakan proses integrasi dengan penyedia media sosial, memungkinkan pengguna masuk dengan akun media sosial favorit mereka secara cepat dan aman. 5. Laravel Telescope Kesulitan dalam debugging di aplikasi bisa dipermudah dengan menggunakan Laravel Telescope Laravel Telescope adalah package yang kuat untuk debugging aplikasi Laravel. Package ini menyediakan antarmuka berbasis web untuk memantau dan debugging berbagai aspek aplikasi Anda selama tahap developing. Dengan Telescope, Anda dapat dengan mudah memeriksa query database, melihat detail dari request yang masuk, mencatat informasi debug, dan banyak lagi. Ini adalah alat yang penting bagi para developer untuk memahami cara kerja aplikasi mereka dan menyelesaikan masalah dengan efisien. Fitur utama dari Laravel Telescope meliputi: Real-time Monitoring: Telescope menawarkan monitoring secara real-time dari berbagai aktivitas aplikasi, seperti query database, operasi caching, notifikasi email, dan lain-lain. Ini memungkinkan pengembang untuk melihat apa yang terjadi di aplikasi saat berjalan.Request Details: Package ini memungkinkan Anda melihat informasi detail tentang permintaan HTTP yang masuk, termasuk header, request dan response payloads, serta data session. Hal ini membantu Anda memahami alur permintaan dan respon dalam aplikasi Anda.Database Queries: Telescope menangkap dan menampilkan semua query database yang dieksekusi, beserta waktu eksekusi dan parameter yang digunakan. Ini membantu dalam mengoptimalkan interaksi dengan database dan mengidentifikasi potensi masalah performa.Log Viewer: Package ini menyediakan tampilan log yang mudah digunakan, memungkinkan Anda melihat dan menyaring pesan log yang dihasilkan oleh aplikasi. Hal ini memudahkan dalam men-debug masalah dan melacak peristiwa aplikasi.Exception Handling: Telescope melacak dan menampilkan exception yang terjadi selama eksekusi aplikasi. Anda dapat melihat stack trace dan konteks exception untuk memudahkan proses debugging.Artisan Command Insights: Package ini memberikan wawasan tentang perintah Artisan yang dieksekusi, memudahkan dalam memonitor task yang dilakukan dan background tracing.Notifications Monitoring: Telescope menangkap dan menampilkan notifikasi yang dikirimkan oleh aplikasi Anda, membantu Anda memverifikasi dan men-debug masalah yang terkait dengan notifikasi.Customizable and Extendable: Telescope dapat dikustomisasi sesuai kebutuhan, dan Anda dapat menambahkan collectors kustom untuk memantau data dan metriks yang spesifik untuk aplikasi Anda. Untuk menggunakan Laravel Telescope, ikut langkah-langkah dibawah ini: Langkah 1: Menginstal Package Buka terminal atau command prompt, masuk ke direktori aplikasi Laravel Anda, dan jalankan perintah berikut untuk menginstal package Laravel Telescope menggunakan Composer: composer require laravel/telescope --dev Flag --dev memastikan bahwa package diinstal sebagai dependensi dilingkungan develop, sehingga package ini hanya tersedia di lingkungan develop. Langkah 2: Menjalankan Perintah Instalasi Setelah diinstal, jalankan perintah berikut untuk mempublikasikan konfigurasi dan aset Telescope: php artisan telescope:install Langkah 3: Mengakses Dashboard Telescope Dengan Telescope terinstal dan dikonfigurasi, jalankan server pengembangan Laravel Anda dengan perintah: php artisan serve Anda sekarang dapat mengakses dashboard Telescope dengan membuka alamat /telescope pada URL server pengembangan Anda (misalnya, http://localhost:8000/telescope). Dari sini, Anda dapat menjelajahi berbagai informasi aplikasi, memonitor permintaan, melihat query, dan men-debug exception yang terjadi dalam aplikasi Anda. Perlu diingat untuk menonaktifkan Telescope di lingkungan production untuk menghindari pengungkapan informasi sensitif dan memastikan kinerja aplikasi tetap terjaga. Kesimpulan Pilihan laravel package ini tentunya akan sangat bermanfaat bagi para web developer, baik yang berpengalaman maupun yang baru memulai perjalanan mereka dalam pengembangan web. Dengan mengintegrasikan package ini ke dalam proyek Laravel mereka, developer dapat meningkatkan produktivitas, keamanan, dan performa aplikasi web yang mereka bangun. Tentu saja, masih ada banyak Laravel Package lainnya yang juga menawarkan fitur-fitur hebat. Namun, dalam artikel yang telah dibahas dalam artikel ini telah terbukti menjadi pilihan utama bagi para developer karena kehandalannya. Dengan ini kita telah mengetahui fitur lainnya dari laravel. Ada ungkapan menarik mengenai hal ini, “Semakin kita tahu, Semakin kita tidak tahu” karena semakin dengan mendalami ilmu yang kita pelajari, semakin banyak juga kita belajar hal kita ketahui sebelumnya. Jadi jika ingin belajar lebih banyak mengenai laravel, di BWA kita menyediakan Kelas Online Mastering Laravel 8 For Beginners & Intermediate: Bangun Website Bootcamp bagi anda yang ingin menguasai laravel. Bagi anda yang pemula dan ingin belajar laravel, kita punya Tips Belajar Laravel Untuk Pemula dan Alur Belajar menjadi seorang Fullstack Website Developer menggunakan laravel.Denganbelajar di platform BuildWith Angga anda juga dapat menambah portofolio dan menambah ilmu untuk memulai karir dibidang ini. Karena dari BuildWith Angga, #semuabisabelajar.

Kelas 10 Hal Dasar Yang Perlu Dipelajari Tentang Laravel di BuildWithAngga

10 Hal Dasar Yang Perlu Dipelajari Tentang Laravel

Laravel merupakan framework yang sangat populer dikalangan web developer. Laravel merupakan framework dari bahasa pemrograman PHP untuk memaksimalkan penggunaan dalam membangun website yang powerful. Laravel menjadi pilihan utama bagi kebutuhan industri maupun start-up yang ingin memiliki website yang lebih cepat dan dinamis. Laravel sudah dipakai oleh banyak perusahaan yaitu BBC, TourRadar, Pfizer, dan masih banyak lagi perusahaan yang menggunakan termasuk start-up. 10 Hal Dasar Perlu Yang Dipelajari Tentang Laravel Framework Laravel yang Dinamis Didalam laravel terdapat hal mendasar yang perlu dipelajari, dasar ini akan menjadi pondasi dalam menguasai laravel. Berikut adalah 10 hal mendasar yang perlu dipelajari dan kuasai di dalam laravel. 1. Routing Routing dalam laravel Routing merupakan proses menentukan dan mengontrol respon permintaan HTTP dari aplikasi anda berdasarkan URL atau URI yang mereka akses. Sangat penting untuk mengetahui bagaimana cara routing dalam menangani permintaan ke fungsi atau metode yang tepat. Dalam laravel routing dikonfigurasi dalam file routes/web.php untuk menangani permintaan HTTP biasa, dan routes/api.php untuk menangani permintaan terkait dengan API yang dipakai didalam aplikasi anda. Beberapa contoh definisi route di laravel yaitu: Basic Route use Illuminate\\Support\\Facades\\Route; Route::get('/greeting', function () { return 'Hello World'; }); Route with Parameter Route::get('/user/{id}', function (string $id) { return 'User '.$id; }); //Anda juga bisa mendefinisikan parameter lebih dari satu juga itu diperlukan Route::get('/posts/{post}/comments/{comment}', function (string $postId, string $commentId) { // ... }); Route With Method //Method yang ada di route Route::get($uri, $callback); Route::post($uri, $callback); Route::put($uri, $callback); Route::patch($uri, $callback); Route::delete($uri, $callback); Route::options($uri, $callback); //pada kasus tertentu anda mungkin perlu menggunakan lebih dari satu method //anda bisa menggunakan "match" method, method ini memungkinkan anda menggunakan lebih dari satu method Route::match(['get', 'post'], '/', function () { // ... }); Named Routes Named Route memungkinkan anda membuat URL yang lebih mudah untuk digunakan. Dengan menggunakan method name, anda bisa memberikan nama yang spesifik untuk route tersebut. Route::get('/user/profile', function () { // ... })->name('profile'); Route Groups Route Groups memungkinkan anda berbagi atribut route dalam waktu bersamaan tanpa harus mendefinisikan atribut disetiap route yang ada. Terdapat beberapa Route Groups yang tersedia di laravel, yaitu: #Middleware Untuk menggunakan middleware didalam route group, kamu bisa menggunakan method sebelum mendefinisikan grup. Untuk mengeksekusi middleware yang dipakai didalam route group, middleware perlu didefinisikan kedalam bentuk array sebagai berikut: Route::middleware(['first', 'second'])->group(function () { Route::get('/', function () { // Uses first & second middleware... }); Route::get('/user/profile', function () { // Uses first & second middleware... }); }); #Controllers Jika didalam sebuah route group itu memanfaatkan controller yang sama, kamu bisa menggunakan method controller untuk mendefinisikan controller yang dipakai untuk semua route yang ada di dalam grup, contohnya adalah sebagai berikut: use App\\Http\\Controllers\\OrderController; Route::controller(OrderController::class)->group(function () { Route::get('/orders/{id}', 'show'); Route::post('/orders', 'store'); }); #Route Prefixes Route Prefixes ini dapat memberikan sebuah inisialisasi pada didalam sebuah grup route, contohnya kita akan memberikan sebuah prefix admin kedalah sebuah route group dengan menggunakan method prefix: Route::prefix('admin')->group(function () { Route::get('/users', function () { // Matches The "/admin/users" URL }); }); Lalu kemudian ada yang dinamakan Route Name Prefixes, yang memberikan string pada sebuah prefix untuk setiap route yang ada didalam grup tersebut. Contohnya kita akan memberikan string admin untuk setiap route yang ada didalam grup, kemudian kita akan memberikan . sebagai trailing untuk karakter tersebut. Route::name('admin.')->group(function () { Route::get('/users', function () { // Route assigned name "admin.users"... })->name('users'); }); 2. Controllers Controller Laravel Controller dalam Laravel adalah kelas yang bertanggung jawab untuk mengelola logika aplikasi dan merespons permintaan dari pengguna. Mereka bertindak sebagai perantara antara routes dan views dalam aplikasi Anda. Ketika pengguna mengakses URL tertentu, controller akan menangani permintaan tersebut dengan melakukan tindakan yang sesuai dan mengembalikan respons yang tepat kepada pengguna. Dalam Laravel, Anda dapat membuat controller dengan mudah menggunakan perintah Artisan, seperti berikut: php artisan make:controller NamaController Perintah di atas akan membuat sebuah file controller baru dalam direktori app/Http/Controllers dengan nama NamaController.php. Sebagai contoh, mari kita buat controller yang sederhana: namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; class ContohController extends Controller { public function index() { return view('halaman'); } public function proses(Request $request) { // Lakukan sesuatu dengan data yang dikirim oleh pengguna melalui form $nama = $request->input('nama'); // Lakukan operasi lain... // Kembalikan respons kepada pengguna return response("Halo, $nama! Permintaan Anda telah diproses."); } } Dalam contoh di atas, controller ContohController memiliki dua metode yaitu index() dan proses(). Metode index() akan mereturn tampilan (view) bernama "halaman" ke pengguna, sedangkan metode proses() akan merespons permintaan yang mengandung data dari pengguna. Controller memungkinkan Anda untuk mengorganisir logika aplikasi dengan baik, mengelompokkan tindakan terkait dalam satu kelas, dan membuat aplikasi lebih mudah untuk dipelihara. Mereka juga memisahkan logika aplikasi dari rute, sehingga meningkatkan struktur dan kejelasan kode Anda. Setiap kali Anda ingin menangani permintaan tertentu dalam Laravel, Anda perlu membuat rute yang terkait dengan metode yang sesuai dalam controller Anda. Controller menjadi komponen penting dalam arsitektur MVC (Model-View-Controller) yang digunakan oleh Laravel. 3. Blade Templating Template Blade dalam Laravel Blade Templating adalah view template dalam Laravel yang memungkinkan Anda untuk memisahkan logika dari tampilan dalam aplikasi web Anda. Dengan Blade, Anda dapat membuat tampilan yang dinamis dengan menyisipkan kode PHP ke dalam template. Blade menyediakan sintaks yang intuitif dan mudah digunakan untuk menyusun tampilan halaman web dengan efisien. Blade template file menggunakan .blade.php file extension dan tersimpan didalam folder resources/views. Fitur-fitur utama dari Blade Templating di Laravel adalah sebagai berikut: Struktur Layout: Anda dapat membuat layout utama (master layout) yang berisi elemen-elemen umum, seperti header, footer, atau sidebar, dan kemudian meng-extend layout ini ke tampilan-tampilan spesifik. Hal ini memungkinkan Anda untuk menghindari pengulangan kode yang tidak perlu dalam setiap halaman.Penyusunan Template: Blade menggunakan konvensi sintaks {{ }} untuk menyisipkan variabel dan objek ke dalam tampilan. Misalnya, {{ $nama }} akan menampilkan isi variabel $nama ke dalam tampilan.Looping: Blade menyediakan looping, seperti penggunaan @if, @else, @foreach, dan @while, yang memungkinkan Anda untuk melakukan logika percabangan dan perulangan dalam tampilan.Penggunaan Layout Partials: Anda dapat memecah tampilan menjadi bagian-bagian kecil (partials) dan menyertakan bagian-bagian ini ke dalam tampilan lain menggunakan sintaks @include. Ini membantu dalam organisasi dan penggunaan kembali kode.Komponen dan Slot: Laravel 7.0 dan versi selanjutnya memperkenalkan fitur komponen dan slot dalam Blade. Komponen memungkinkan Anda untuk mengelompokkan logika tampilan yang terkait dalam satu unit yang terpisah. Slot digunakan untuk mengisi konten dinamis ke dalam komponen. Misalnya @component('front.components.course-card-horizontal') memiliki beberapa @slot didalam slot tersebut kita akan mengisi dengan sebuah value, isi dari slot tersebut adalah @slot('nama', $param->nama)Komponen View: Blade juga memungkinkan Anda untuk membuat komponen view, yang merupakan tampilan reusable dengan logika dan tampilan yang tertanam dalam satu kelas. Contoh Penggunaan Blade Templating: File master layout (layouts/app.blade.php): <!DOCTYPE html> <html> <head> <title>{{ $title }}</title> </head> <body> @yield('content') </body> </html> File halaman (pages/home.blade.php): @extends('layouts.app') @section('content') <h1>Halo, {{ $nama }}</h1> @endsection Dalam contoh di atas, kita menggunakan layout utama app.blade.php dan menyisipkan konten dari halaman home.blade.php ke dalamnya menggunakan @yield dan @section. Variabel $nama disisipkan ke dalam tampilan menggunakan sintaks Blade {{ $nama }}. Blade Templating memudahkan Anda dalam menyusun tampilan yang dinamis dan efisien, serta membantu dalam memisahkan tampilan dari logika, sehingga meningkatkan struktur dan kejelasan kode Anda dalam pengembangan aplikasi Laravel. 4. Eloquent ORM Operasi Basis Data Menggunakan Laravel Eloquent ORM adalah fitur utama dalam Laravel yang menyediakan cara yang mudah dan ekspresif untuk berinteraksi dengan basis data dalam aplikasi Anda. "ORM" singkatan dari "Object-Relational Mapping," yang berarti Eloquent memungkinkan Anda untuk menggunakan objek-objek dalam bahasa pemrograman PHP untuk merepresentasikan tabel dan baris dalam basis data. Dengan Eloquent ORM, Anda tidak perlu menulis kueri SQL secara langsung ataupun memanipulasi basis data menggunakan kode kustom. Sebaliknya, Anda dapat menggunakan model Eloquent untuk mewakili tabel dalam basis data dan metode-metode yang terkait untuk melakukan operasi CRUD (Create, Read, Update, Delete) dengan mudah. Berikut adalah langkah-langkah untuk menggunakan Eloquent ORM dalam Laravel: Mendefinisikan Model Anda perlu membuat Model Class yang mewakili tabel dalam basis data. Model ini harus meng-extend kelas Illuminate\\Database\\Eloquent\\Model dan secara otomatis berisi informasi tentang tabel yang sesuai dengan nama model. Sebagai contoh, jika Anda memiliki tabel "users", maka Anda dapat membuat model dengan nama "User" seperti berikut: //buat dulu migrasi di laravel, dan laravel akan otomatis membuat migrasi dengan artisan console php artisan make:migration create_users_table //masuk kedalam **database/migrations/create_users_table**, kemudian modifikasi migrasi tersebut <?php use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Support\\Facades\\Schema; return new class extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); } }; //migrasikan *datatable* yang sudah dibuat kedalam database php artisan migrate //kemudian buat model yang berintegrasi dengan migrasi tersebut php artisan make:model User //Model yang sudah dibuat namespace App\\Models; use Illuminate\\Database\\Eloquent\\Model; class User extends Model { protected $table = 'users'; } Menggunakan Eloquent Querying Setelah Anda mendefinisikan model, Anda dapat menggunakan berbagai metode Eloquent untuk melakukan query ke dalam basis data. Misalnya, Anda dapat menggunakan metode all() untuk mengambil semua data dari tabel: $users = User::all(); Menyimpan Data Baru Untuk menyimpan data baru ke dalam basis data, Anda bisa membuat objek model baru dan mengisi atribut-atributnya sesuai data yang ingin disimpan, lalu panggil metode save(): $user = new User; $user->name = 'Akbar'; $user->email = '[email protected]'; $user->save(); Mengambil Data Berdasarkan Kriteria Anda dapat menggunakan berbagai metode untuk mengambil data berdasarkan kriteria tertentu, seperti where(), find(), first(), dan sebagainya: $user = User::where('name', 'Akbar')->first(); Melakukan Update Data Untuk melakukan update data, Anda dapat mengambil objek model yang sudah ada, mengubah atribut-atribut yang ingin diperbarui, dan panggil metode save(): $user = User::find(1); $user->name = 'Rabka'; $user->save(); Menghapus Data Untuk menghapus data, Anda dapat mengambil objek model yang sudah ada dan panggil metode delete(): $user = User::find(1); $user->delete(); Eloquent ORM menyediakan banyak fitur tambahan, seperti hubungan antar model (relationships), validasi data sebelum penyimpanan, peristiwa (events), dan banyak lagi. Fitur-fitur ini membantu Anda dalam mengelola basis data dengan lebih mudah dan efisien, serta memungkinkan Anda untuk fokus pada logika aplikasi daripada pengelolaan basis data secara langsung. Dan diatas hanyalah sebuah contoh sederhana bagaimana melakukan Eloquent ORM, Anda dapat melakukan variasi query yang biasa dilakukan menggunakan logika dari ORM. 5. Eloquent Relationship Membuat Relasi Database di Laravel Lebih Mudah Eloquent Relationship adalah fitur yang kuat dalam Laravel yang memungkinkan Anda mendefinisikan dan memanfaatkan hubungan antara model dalam basis data. Dalam istilah Eloquent, hubungan antara model disebut sebagai "Relationships." Hal ini memungkinkan Anda untuk menggambarkan interaksi antara tabel yang berbeda dalam basis data, seperti hubungan one-to-one, one-to-many, many-to-one, dan many-to-many. Ada beberapa jenis hubungan yang didukung oleh Eloquent: One-to-One: Pada Relationships One-to-One, setiap baris dalam model A berhubungan dengan satu baris dalam model B, dan sebaliknya. Misalnya, Anda memiliki tabel "users" dan "profiles", di mana setiap pengguna memiliki satu profil.One-to-Many: Pada Relationships One-to-Many, setiap baris dalam model A berhubungan dengan banyak baris dalam model B. Misalnya, pada hubungan antara tabel "users" dan "posts", di mana satu pengguna dapat memiliki banyak postingan.Many-to-One: Relationships Many-to-One adalah kebalikan dari hubungan One-to-Many. Setiap baris dalam model B berhubungan dengan satu baris dalam model A. Misalnya, pada hubungan antara tabel "comments" dan "posts", banyak komentar dapat terkait dengan satu postingan.Many-to-Many: Pada Relationships Many-to-Many, setiap baris dalam model A dapat berhubungan dengan banyak baris dalam model B, dan sebaliknya. Misalnya, pada hubungan antara tabel "users" dan "roles", di mana setiap pengguna dapat memiliki banyak peran, dan setiap peran dapat dimiliki oleh banyak pengguna. Untuk mendefinisikan Eloquent Relationship, Anda harus menambahkan metode-metode khusus dalam model Anda. Sebagai contoh, mari kita lihat Relationships One-to-One dan One-to-Many antara tabel "users" dan "profiles", yaitu: Model User: namespace App\\Models; use Illuminate\\Database\\Eloquent\\Model; class User extends Model { public function profile() { return $this->hasOne(Profile::class); } public function posts() { return $this->hasMany(Post::class); } } Model Profile: namespace App\\Models; use Illuminate\\Database\\Eloquent\\Model; class Profile extends Model { public function user() { return $this->belongsTo(User::class); } } Dalam contoh di atas, pada model User, kita mendefinisikan metode profile() dan posts(). Metode profile() mendefinisikan Relationships One-to-One dengan model Profile, sedangkan metode posts() mendefinisikan Relationships One-to-Many dengan model Post. Pada model Profile, kita mendefinisikan metode user(), yang merupakan inverse relationship dari Relationships One-to-One dengan model User. Setelah Anda mendefinisikan hubungan ini, Anda dapat dengan mudah mengakses data terkait melalui model, seperti: // Mendapatkan profil pengguna $user = User::find(1); $profile = $user->profile; // Mendapatkan postingan pengguna $posts = $user->posts; Dengan menggunakan hubungan Eloquent, Anda dapat dengan mudah mengelola interaksi antara model dalam basis data Anda, dan membantu menjaga struktur dan organisasi aplikasi Anda. 6. Migrations dan Seeders Migrations dan Seeders adalah dua fitur penting dalam Laravel yang digunakan untuk mengelola skema basis data dan data awal dalam aplikasi Anda. Migrations Migrations adalah mekanisme untuk mengelola perubahan skema basis data Anda secara terstruktur dan mudah diulang. Dengan menggunakan Migrations, Anda dapat membuat, mengubah, atau menghapus tabel dan kolom dalam basis data dengan bantuan kode PHP, tanpa perlu menulis SQL langsung. Migrations membantu Anda dan tim Anda untuk berkolaborasi dalam mengatur skema basis data dan memastikan bahwa setiap anggota tim memiliki versi skema basis data yang konsisten. Setiap migrasi adalah kelas PHP yang berisi dua metode utama: up() untuk menerapkan perubahan skema dan down() untuk mengembalikan perubahan jika diperlukan. Contoh sederhana migrasi untuk membuat tabel "users": php artisan make:migration create_users_table use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; use Illuminate\\Support\\Facades\\Schema; class CreateUsersTable extends Migration { public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('users'); } } Setelah Anda membuat migrasi, Anda dapat menjalankannya dengan menggunakan perintah Artisan: php artisan migrate Perintah di atas akan mengeksekusi semua migrasi yang belum dijalankan sebelumnya. Seeders Seeders adalah fitur yang memungkinkan Anda untuk mengisi data awal ke dalam tabel basis data. Data ini dapat berupa data sampel atau data yang diperlukan untuk pengujian atau pengembangan aplikasi. Seeders biasanya digunakan untuk mengisi data awal untuk tabel yang perlu memiliki beberapa entri data sebelum aplikasi dijalankan. Setiap seeder adalah kelas PHP yang berisi metode run(). Contoh sederhana seeder untuk mengisi data awal ke dalam tabel "role": php artisan make:seed RoleSeeder use Illuminate\\Database\\Seeder; use Illuminate\\Support\\Facades\\DB; class RoleSeeder extends Seeder { public function run() { DB::table('roles')->insert([ ['name' => 'Admin'], ['name' => 'User'], ['name' => 'Editor'], ]); } } Anda dapat menjalankan seeder dengan menggunakan perintah Artisan: php artisan db:seed --class=RoleSeeder Perintah di atas akan menjalankan seeder "RolesTableSeeder" untuk mengisi data awal ke dalam tabel "role". Dengan menggabungkan Migrations dan Seeders, Anda dapat dengan mudah mengelola skema basis data dan data awal dalam aplikasi Laravel Anda dengan terstruktur dan efisien. Ini membantu Anda mempertahankan basis data dalam keadaan yang konsisten dan siap digunakan saat mengembangkan dan memelihara aplikasi. 7. Middleware Middleware adalah fitur penting dalam Laravel yang memungkinkan Anda melakukan tindakan tertentu di antara permintaan masuk dan respon yang dikirimkan oleh aplikasi web Anda. Middleware berada di tengah-tengah proses HTTP request dan response, dan memungkinkan Anda memodifikasi atau memeriksa permintaan sebelum sampai ke route handler, serta memodifikasi atau memeriksa response sebelum dikirimkan kembali ke pengguna. Contoh penggunaan middleware adalah untuk autentikasi pengguna, validasi data, log aktivitas, dan lain-lain. Dengan middleware, Anda dapat mengorganisir tindakan-tindakan ini dalam satu tempat dan menerapkannya pada beberapa route atau grup route tertentu. Setiap middleware adalah kelas PHP yang mengimplementasikan kontrak Illuminate\\Contracts\\Http\\Middleware\\Middleware dan menggunakan metode handle() untuk memproses permintaan. Middleware dapat diberi nama untuk identifikasi dan dapat ditempatkan dalam berbagai urutan sesuai kebutuhan. Contoh sederhana middleware untuk memeriksa apakah pengguna sudah terautentikasi: namespace App\\Http\\Middleware; use Closure; use Illuminate\\Http\\Request; class AuthenticateMiddleware { public function handle(Request $request, Closure $next) { if (!auth()->check()) { return redirect('/login'); } return $next($request); } } Dalam contoh di atas, middleware AuthenticateMiddleware memeriksa apakah pengguna sudah terautentikasi dengan menggunakan fungsi auth()->check(). Jika pengguna belum terautentikasi, maka middleware akan mengalihkan permintaan ke halaman login. Jika pengguna sudah terautentikasi, maka middleware akan melanjutkan permintaan ke route handler selanjutnya dengan menggunakan $next($request). Untuk menerapkan middleware pada route tertentu, Anda bisa menambahkannya ke dalam file app/Http/Kernel.php dalam grup routeMiddleware, dan memberikan alias untuk middleware tersebut: protected $routeMiddleware = [ 'auth' => \\App\\Http\\Middleware\\AuthenticateMiddleware::class, ]; Selanjutnya, Anda dapat menggunakan alias 'auth' pada route yang memerlukan autentikasi: Route::get('/dashboard', function () { // Hanya pengguna yang terautentikasi yang bisa mengakses halaman dashboard })->middleware('auth'); Middleware memungkinkan Anda untuk melakukan banyak tindakan secara modular dan terstruktur dalam aplikasi Laravel Anda. Hal ini membantu meningkatkan keamanan, pengelolaan, dan efisiensi dalam pengembangan aplikasi web. 8. Validation Validation adalah proses memeriksa data yang dikirimkan oleh pengguna untuk memastikan bahwa data tersebut memenuhi kriteria atau format yang diharapkan sebelum data tersebut diproses lebih lanjut oleh aplikasi. Dalam konteks aplikasi web, validasi biasanya dilakukan pada data yang dikirimkan melalui formulir oleh pengguna sebelum data tersebut disimpan dalam basis data atau digunakan untuk tindakan lain dalam aplikasi. Dalam Laravel, Validation dapat dilakukan dengan mudah menggunakan fitur bawaan yang disediakan oleh framework. Validation membantu Anda memastikan bahwa data yang masuk adalah data yang valid dan sesuai dengan aturan atau format tertentu sebelum diolah lebih lanjut. Jika data tidak valid, Anda dapat memberikan pesan error yang sesuai kepada pengguna agar mereka tahu bagaimana cara memperbaiki data yang salah. Berikut adalah contoh bagaimana Anda dapat melakukan validasi dalam Laravel: use Illuminate\\Http\\Request; use Illuminate\\Support\\Facades\\Validator; public function store(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required|string|max:255', 'email' => 'required|email|unique:users,email', 'password' => 'required|min:8|confirmed', ]); if ($validator->fails()) { return redirect()->back()->withErrors($validator)->withInput(); } // Lanjutkan dengan menyimpan data atau melakukan tindakan lainnya jika data valid } Dalam contoh di atas, kita menggunakan fasilitas validasi dari Laravel dengan membuat validator menggunakan Validator::make(). Kemudian, kita mendefinisikan aturan validation untuk setiap data yang dikirimkan oleh pengguna dalam bentuk array assosiatif. Misalnya, name harus berupa string yang tidak boleh lebih dari 255 karakter, email harus berupa alamat email yang unik dalam tabel "users", dan password harus minimal 8 karakter dan harus dikonfirmasi dengan input lain bernama password_confirmation. Jika ada data yang tidak memenuhi aturan validation, $validator->fails() akan mengembalikan nilai true, dan Anda dapat mengalihkan pengguna kembali ke halaman sebelumnya dengan pesan error dan input sebelumnya yang masih diisi (untuk memudahkan pengguna memperbaiki data). Validation adalah fitur yang sangat penting untuk memastikan data yang masuk ke aplikasi Anda adalah data yang valid dan aman. Dengan menggunakan fitur validation yang disediakan oleh Laravel, Anda dapat lebih mudah dan efisien dalam mengelola data yang masuk dan menghindari potensi masalah keamanan dan kesalahan data. 9. Authentication dan Authorization Authentication dan Authorization adalah dua konsep penting dalam pengembangan aplikasi web yang berfokus pada keamanan dan kontrol akses pengguna. A. Autentikasi (Authentication): Authentication adalah proses verifikasi identitas pengguna untuk memastikan bahwa pengguna adalah orang yang memiliki akun tersebut. Dalam konteks aplikasi web, autentikasi biasanya melibatkan verifikasi username dan password atau metode lainnya yang dapat membuktikan identitas pengguna. Contoh Authentication: Misalnya, pada halaman login, pengguna diminta untuk memasukkan username dan password. Setelah mengirimkan formulir, aplikasi akan memeriksa apakah username dan password yang dimasukkan sesuai dengan yang ada dalam basis data pengguna. Jika sesuai, maka pengguna dianggap terautentikasi dan diizinkan untuk mengakses bagian dari aplikasi yang memerlukan autentikasi. public function login(Request $request) { $credentials = $request->only('email', 'password'); if (Auth::attempt($credentials)) { // Autentikasi berhasil, lakukan tindakan selanjutnya return redirect()->intended('/dashboard'); } else { // Autentikasi gagal, kembali ke halaman login dengan pesan error return redirect()->back()->withErrors(['email' => 'Email atau password salah.']); } } B. Otorisasi (Authorization): Authorization adalah proses yang dilakukan setelah autentikasi untuk menentukan apakah pengguna memiliki izin atau wewenang untuk mengakses sumber daya atau melakukan tindakan tertentu dalam aplikasi. Dengan kata lain, otorisasi menentukan apa yang diizinkan dan apa yang tidak diizinkan untuk dilakukan oleh pengguna terautentikasi. Contoh Authorization: Misalnya, dalam aplikasi forum, hanya pengguna yang membuat postingan tertentu yang diizinkan untuk mengedit atau menghapus postingan tersebut. Otorisasi akan memverifikasi apakah pengguna yang sedang login memiliki izin untuk mengakses fitur tersebut sebelum mengizinkan aksi tersebut dilakukan. public function update(Request $request, $id) { $post = Post::findOrFail($id); if ($post->user_id === auth()->user()->id) { // Pengguna yang sedang login adalah pemilik postingan, izinkan untuk mengedit $post->update($request->all()); return redirect()->route('posts.show', ['post' => $post])->with('success', 'Postingan berhasil diperbarui.'); } else { // Pengguna tidak memiliki izin untuk mengedit postingan return redirect()->route('posts.show', ['post' => $post])->with('error', 'Anda tidak diizinkan untuk mengedit postingan ini.'); } } Dalam contoh di atas, sebelum mengizinkan pengguna untuk mengedit postingan, kita memverifikasi apakah user_id dari postingan cocok dengan id pengguna yang sedang login. 10. Artisan Console Artisan Command Dalam Laravel Artisan Console adalah bagian dari kerangka kerja Laravel yang memungkinkan pengguna untuk berinteraksi dengan aplikasi melalui baris perintah. Artisan menyediakan berbagai perintah yang dapat digunakan untuk menjalankan tugas-tugas tertentu, seperti migrasi database, pembuatan model, pengaturan lingkungan, dll, jadi dapat disimpulkan Artisan Console berfungsi sebagai alat untuk mengelola berbagai tugas pada aplikasi Laravel. Berikut adalah beberapa aspek penting tentang Artisan Console di Laravel: Menjalankan Perintah: Artisan Console dapat diakses melalui terminal atau command prompt dengan menjalankan perintah php artisan. Ini akan menampilkan daftar perintah yang tersedia.Daftar Perintah Bawaan: Laravel sudah menyediakan banyak perintah bawaan, seperti:make:controller: Untuk membuat controller baru.make:model: Untuk membuat model baru.make:migration: Untuk membuat file migrasi database baru.migrate: Untuk menjalankan migrasi database.db:seed: Untuk memasukkan data awal ke dalam database.route:list: Untuk melihat daftar rute yang telah didefinisikan dalam aplikasi.Dan banyak lagi.Membuat Perintah Kustom: Selain perintah bawaan, pengguna juga dapat membuat perintah kustom mereka sendiri untuk tugas-tugas khusus yang dibutuhkan dalam aplikasi. Ini memungkinkan pengguna untuk mengotomatisasi tugas-tugas yang sering dilakukan.Argumen dan Opsi: Perintah Artisan dapat menerima argumen dan opsi. Argumen adalah nilai yang diperlukan oleh perintah untuk berfungsi, sedangkan opsi adalah argumen yang bersifat opsional. Misalnya, perintah untuk membuat model mungkin memerlukan argumen "nama model", tetapi opsi seperti "--table" untuk menentukan nama tabel yang digunakan oleh model.Menampilkan Output: Artisan Console memberikan output yang informatif saat menjalankan perintah, seperti pesan kesalahan jika ada, atau informasi tambahan tentang tugas yang dijalankan.Environment Configuration: Dalam beberapa perintah, Artisan dapat menggunakan environment untuk mempengaruhi perilaku perintah yang berjalan di lingkungan development atau production. Artisan Console adalah salah satu fitur kunci yang membuat Laravel menjadi framework yang kuat dan efisien dalam pengembangan aplikasi web. Dengan menggunakan Artisan, pengembang dapat mengotomatisasi banyak tugas repetitif, meningkatkan produktivitas, dan menjaga konsistensi kode dalam proyek mereka. Kesimpulan Dari artikel "10 Hal Dasar yang Perlu Dipelajari tentang Laravel" dapat disimpulkan bahwa Laravel adalah sebuah framework PHP yang sangat kuat dan populer untuk pengembangan aplikasi web. Artikel ini telah membahas sepuluh hal dasar yang perlu dipahami oleh pengembang pemula maupun yang berpengalaman dalam membangun proyek dengan menggunakan Laravel. Dengan memahami dan menguasai kesepuluh hal dasar tersebut, para pengembang dapat mengoptimalkan potensi Laravel dan membangun aplikasi web yang kuat, efisien, dan handal. Semangat belajar dan eksplorasi akan menjadi kunci kesuksesan dalam mengembangkan aplikasi dengan framework Laravel. Jadi tunggu apa lagi, di BWA kita juga menyediakan Bootcamp Membangun Sebuah Website Menggunakan Laravel bagi yang masih pemula dan ingin membangun jenjang karir sebagai Laravel Developer, atau bagi anda yang ingin lebih mendalami laravel bisa cek Kelas Mastering Laravel 8: Bikin Website jual Furniture. Dengan mengikuti kelas yang ada di BWA anda juga dapat menambah portofolio dan menambah ilmu untuk memulai karir Laravel Developer. Karena dari BuildWith Angga, #semuabisabelajar

Kelas 5 Package Vue JS Untuk Front End Developer di BuildWithAngga

5 Package Vue JS Untuk Front End Developer

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!

Kelas Membuat Form Login Menggunakan Tailwind CSS di BuildWithAngga

Membuat Form Login Menggunakan Tailwind CSS

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.

Kelas Mengenal Figma dan Langkah Membuat Prototyping di BuildWithAngga

Mengenal Figma dan Langkah Membuat Prototyping

Bagi kamu yang memiliki ketertarikan dengan UI/UX design mungkin sudah tidak asing dengan software Figma. Figma telah menjadi salah satu alat desain UI/UX yang populer di kalangan desainer digital. Tools ini menyediakan fitur-fitur handal untuk membuat desain aplikasi yang interaktif. Dalam artikel ini, kita akan mengenal Figma secara singkat dan membahas langkah-langkah untuk membuat prototyping dengan mudah. Pengenalan Figma dan Langkah Membuat Prototyping Figma adalah alat desain berbasis web yang memungkinkan kolaborasi tim desain dan pembuatan prototype antarmuka pengguna. Dibandingkan dengan software desain lainnya, Figma menawarkan keuntungan berupa aksesibilitas dan kemudahan kolaborasi karena dapat diakses secara online dan memungkinkan pengguna untuk bekerja secara real-time. Rapat membahas aplikasi yang akan didesain menggunakan Figma Figma juga digunakan oleh beberapa brand besar termasuk Google, Microsoft, Twitter, Zoom, Dropbox, dan Walgreens. Banyak perusahaan lain di berbagai industri yang juga mengadopsi Figma sebagai alat desain dan prototyping. Figma telah menjadi pilihan yang populer di kalangan desainer dan tim pengembangan di berbagai perusahaan karena kemudahan penggunaan dan fiturnya yang sangat beragam. Dengan Figma kita dapat menghemat waktu karena bisa berkolaborasi seperti mengubah rancangan desain dalam waktu yang bersamaan dengan tim dan memberi komentar. Selain itu Figma memudahkan para desainer dengan adanya sistem berbasis cloud, para desainer akan lebih flexible untuk membuka desain dimana dan kapan saja. Figma juga memiliki banyak plugin yang membantu para Desainer untuk membuat animasi berupa gambar dan asset penunjang lainnya. Dengan begitu, tampilan prototype tidak hanya tampilan sederhana, tetapi mengarah ke tampilan Aplikasi yang sebenarnya ingin dibuat. Apa itu Prototype? Proses pembuatan wireframe sebelum direalisasikan ke bentuk prototype di Figma Dalam proses pembuatan desain aplikasi atau website, tahap yang tidak dapat dilewatkan adalah pembuatan prototype. Prototype merupakan langkah penting untuk mengubah sifat abstrak dari sebuah ide menjadi sesuatu yang lebih konkret. Keberadaan prototype memiliki peran yang krusial dalam desain aplikasi maupun desain website, karena melalui prototype kita dapat menguji fungsionalitas dan navigasi aplikasi sebelum proses pengembangan oleh para programmer dimulai. Dengan adanya prototype, kita dapat mengidentifikasi kelemahan dan penyesuaian desain secara efektif sebelum mencapai tahap implementasi yang kompleks. Prototype memungkinkan kita untuk melakukan perbaikan sebelum user berinteraksi dengan aplikasi atau website yang dikembangkan. Langkah-Langkah Membuat Prototyping dengan Figma Tampilan desain prototype di Figma Dengan menggunakan Figma, prototyping dapat dilakukan secara digital dengan memanfaatkan fitur-fitur yang disediakan. Ini memungkinkan desainer untuk membuat simulasi langsung dari interaksi pengguna dengan UI aplikasi, memperlihatkan alur, tampilan, dan fungsionalitas secara lebih detail dan realistis. Dengan begitu desainer dapat memvalidasi desain, mengumpulkan feedback, dan membuat perbaikan yang diperlukan. Selain itu, prototyping juga dapat digunakan untuk melakukan demonstrasi kepada klien, sehingga mereka dapat memahami bagaimana aplikasi akan berfungsi sebelum tahap implementasi. Berikut merupakan langkah dalam menggunakan fitur prototype yang ada pada figma : 1. Siapkan Design yang akan diaplikasikan ke Prototype Contoh desain aplikasi yang akan di prototyping di Figma Sebelum membuat prototyping, pastikan kamu telah menyelesaikan desain UI dengan lengkap. Pastikan semua elemen desain telah dirancang dengan jelas dan berfungsi dengan baik. 2. Buka Tab Prototype Tab prototype pada Figma Tab Prototype terletak di sebelah kanan atas. Dalam tab ini kita dapat mengatur beberapa hal seperti pengaturan tab yang ingin dipakai, mengatur warna background, dan mengatur halaman pertama yang dijalankan. 3. Pilih Konten untuk Diarahkan Tampilan halaman yang akan dihubungkan satu sama lain di Figma Gambar di atas adalah konten yang sudah diarahkan ke halaman tujuan. Untuk membuatnya, kita hanya perlu klik konten seperti desain button, tulisan, gambar, dll. Selanjutnya tarik ke halaman yang sudah kita buat untuk menjalankan aksinya. 4. Custom Animation Menu custom animation pada Figma Klik pada elemen yang akan dibuat prototypenya. Masuk ke tab prototype dan klik interactions disini kita dapat memilih jenis aksi seperti apa yang ingin kita lakukan untuk menuju ke halaman berikutnya. Untuk animasi yang disediakan sudah cukup banyak dan bisa kita custom sesuai dengan kebutuhan masing-masing aplikasi atau web. 5. Klik Play Fitur play untuk menjalankan prototype di Figma 6. Prototype Berhasil Dibuat Prototype yang berhasil di buat di Figma Kesimpulan Nah itu dia penjelasan mengenai software Figma dan bagaimana tahapan melakukan prototyping. Dengan mengikuti langkah-langkah di atas, kamu bisa membuat prototyping yang keren sesuai ide aplikasi yang ingin kamu buat. Jangan takut untuk eksplorasi dengan elemen desain, plugin, dan fitur yang tersedia di Figma. Let's have some fun and create awesome prototypes with Figma!

Kelas [TELAH TERISI] Lowongan Magang Jr Frontend Vue JS Bandung di BuildWithAngga

[TELAH TERISI] Lowongan Magang Jr Frontend Vue JS Bandung

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.