Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
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.

Kelas Cara Mengikuti Promo Patungan BuildWithAngga di BuildWithAngga

Cara Mengikuti Promo Patungan BuildWithAngga

BuildWithAngga sering mengadakan promo patungan sehingga setiap orang dapat mempelajari ilmu baru di bidang design, coding, business, dan freelance dengan harga lebih terjangkau dibandingkan bayar kelas Premium sendirian. Tata cara aman mengikuti Promo Periksa kelas yang sedang promo patungan pada halaman Flash Sale BuildWithAnggaJoin grup Telegram resmi BuildWithAngga untuk cari 5 atau 10 orang rekan patungan pada satu kelas premiumSetelah terkumpul 5-10 orang maka silahkan transfer uang Anda bersama dengan rekan lainnya kepada satu orang yang telah dipercaya untuk melakukan checkout kelas premium nantinyaBerikan email akun BuildWithAngga Anda kepada orang tersebut untuk ditambahkan akses kelas ketika proses checkout Satu orang yang checkout kelas Premium tersebut wajib menambahkan email student lainnya karena jika tidak nanti akses kelas tidak akan masuk kepada email-email tersebut. Penting dalam memilih rekan patungan Saat ini BuildWithAngga belum tersedia fitur checkout sendiri-sendiri untuk promo patungan, maka dari itu Anda perlu memilih rekan patungan dengan hati-hati dan teliti agar terhindar dari kerugian yang merugikan Anda.

Kelas Mengenal Server Component Pada NextJS di BuildWithAngga

Mengenal Server Component Pada NextJS

Next.js versi 13 membawa sejumlah fitur baru dan peningkatan yang signifikan dalam pengembangan aplikasi web. Fitur-fitur ini membantu meningkatkan kinerja, kecepatan pengembangan, dan kemudahan penggunaan, menjadikannya salah satu pilihan utama bagi pengembang untuk membangun aplikasi web yang canggih dan responsif. Mengenal Server Component Pada NextJS Server Component adalah salah satu fitur utama yang diperkenalkan dalam Next.js versi 13. Fitur ini memungkinkan pengembang untuk membagi logika dan tampilan aplikasi web menjadi komponen-komponen yang dikelola oleh server. Dengan menggunakan Server Component, pengembang dapat memisahkan logika server dari logika klien (client) dan mengirimkan hanya data yang diperlukan ke klien, mengurangi beban dan mempercepat waktu respons aplikasi. Client Component Secara sederhana Client Component adalah komponen yang dirender di sisi klien. Sebelum menggunakan React 18 semua komponen yang ada dirender dari sisi klien. Sedangkan pada NextJS untuk menggunakan klien komponen kamu hanya perlu menuliskan “use client” di bagian paling atas kode yang kamu buat. 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } Server Component Server Component merupakan hal baru yang baru digunakan pada React versi 18 dan diterapkan juga pada NextJS versi 13. Server Component memberikan kemampuan untuk merender sebuah komponen di sisi server dan hanya memberikan file JavaScript yang hanya diperlukan oleh pengguna. Server Component pada Next.js bekerja dengan cara mengizinkan komponen-komponen tertentu untuk dijalankan di sisi server saat permintaan pertama kali datang. Komponen-komponen ini akan dikelola oleh server dan menghasilkan output HTML yang siap ditampilkan kepada pengguna. Setelah itu, komponen-komponen tersebut dapat diubah menjadi komponen klien yang interaktif dan dikelola oleh browser. Kapan harus menggunakan Client Component dan Server Component? Walaupun kamu dapat menggunakan Client Component dan Server Component secara bersamaan namun terdapat beberapa aturan yang berlaku seperti kamu tidak bisa mengimport sebuah server component ke dalam sebuah client component seperti di bawah ini. 'use client'; import MyServerComponent from './MyServerComponent'; export default function ClientComponent() { return ( <> <MyServerComponent /> </> ); } Sebagai gantinya kamu dapat membuat server component sebagai props dari sebuah client component. import ClientComponent from "./ClientComponent"; import ServerComponent from "./ServerComponent"; export default function Page() { return ( <ClientComponent> <ServerComponent /> </ClientComponent> ); } Tentu penggunaan Client Component dan Server Component bergantung pada kebutuhan dari sebuah projek yang kamu buat. Berikut adalah panduan yang bisa kamu gunakan untuk memilih kapan harus menggunakan Client Component dan Server Component? Client Component: Kamu butuh untuk menggunakan React Hooks seperti useEffect, useState, useReducer, dan sebagainya.Adanya interaktifitas terhadap komponen dengan menggunakan listener seperti onClick().Cocok untuk digunakan apabila terdapat interaksi yang secara real time dan tanpa ketergantungan pada server. Server Component Jika kamu mengambil data melalui APIJika kamu perlu menyimpan sebuah data yang bersifat sensitif seperti token, kunci API, dan lain-lain.Pada komponen tersebut perlu melakukan pengolahan data yang cukup kompleks dan melibatkan server dan apabila komponen tersebut membutuhkan data yang perlu mengakses bagian database secara langsung. Kesimpulan Pemilihan antara Client Component dan Server Component tergantung pada kebutuhan spesifik dan skenario pengembangan aplikasi web. Client Component cocok digunakan ketika komponen hanya memerlukan akses ke data klien dan untuk membangun komponen interaktif di sisi klien. Sementara itu, Server Component digunakan ketika komponen memerlukan akses ke data yang hanya tersedia di sisi server, untuk mengolah data yang kompleks, dan mempercepat waktu render pertama kali. Jika kamu ingin lebih mempelajari tentang NextJS kamu bisa mengikuti kelas NextJS Basic atau Membuat Website Voucher Game dengan terintegrasi API VocaGame melalui website buildwithangga.com.

Kelas Membuat Responsive Design Menggunakan Tailwind di BuildWithAngga

Membuat Responsive Design Menggunakan Tailwind

Tailwind adalah sebuah framework CSS yang dirancang untuk memudahkan pengembangan antarmuka pengguna dalam pengembangan web. Framework ini menyediakan sejumlah besar kelas CSS yang dapat digunakan untuk membangun dan mengatur tampilan halaman web dengan cepat dan efisien. Membuat Responsive Design Menggunakan Tailwind Responsive design, atau desain responsif, adalah pendekatan dalam pengembangan web yang memastikan tampilan halaman web dapat menyesuaikan diri dengan berbagai ukuran layar perangkat yang berbeda, seperti komputer desktop, tablet, atau smartphone. Dengan desain responsif, halaman web akan diatur ulang secara otomatis untuk memastikan konten tetap terlihat dengan baik dan dapat diakses oleh pengguna pada berbagai perangkat. Mengenal Breakpoints pada Tailwind Dalam Tailwind, breakpoint adalah titik tertentu pada rentang lebar layar yang digunakan untuk menentukan perubahan tata letak atau gaya pada elemen-elemen dalam desain responsif. Breakpoint memungkinkan untuk mengatur perilaku elemen UI ketika layar berubah ukurannya, sehingga dapat mengoptimalkan tampilan halaman web untuk berbagai perangkat. Tailwind menyediakan sejumlah breakpoint bawaan yang sudah ditentukan. Berikut adalah beberapa contoh breakpoint yang umum digunakan: Small (sm): Biasanya digunakan untuk layar smartphone dengan lebar hingga sekitar 640px.Medium (md): Digunakan untuk layar tablet dengan lebar sekitar 640px hingga 768px.Large (lg): Digunakan untuk layar laptop atau desktop dengan lebar sekitar 768px hingga 1024px.Extra Large (xl): Digunakan untuk layar desktop besar dengan lebar di atas 1024px. Membuat Komponen Card Pada kesempatan kali ini kita akan membuat sebuah komponen card menggunakan Tailwind. Pada komponen tersebut akan memiliki sebuah gambar, judul produk, dan bagian deskripsi produk. Untuk container pada komponen card tersebut kita akan menggunakan grid dari Tailwind yang berfungsi untuk membuat tata letak grid yang responsif dengan mudah. Grid memungkinkan kamu untuk mengatur elemen-elemen ke dalam baris dan kolom, grid-cols berfungsi untuk mengatur jumlah komponen yang ada di dalam kolom grid. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="output.css"> <title>Document</title> </head> <body> <div class="border border-red h-screen flex justify-center items-center"> <div class="container mx-auto px-4 py-8"> <div class="grid grid-cols-4"> <div class="bg-gray-200 p-4"> <img src="../image-1.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 1</h2> <p class="text-gray-600">Deskripsi Produk 1</p> </div> </div> </div> </div> </div> </body> </html> Menambah Komponen Card Setelah membuat komponen card kita perlu membuat beberapa komponen card lagi agar dapat menerapkan responsive pada tampilan yang kita buat. Pada container grid kita perlu memberikan kelas “gap-4” agar memberi jarak pada setiap komponen card yang ada. Pada setiap komponen card juga kita perlu memberikan background, padding, dan ukuran font yang sesuai dengan komponen card pertama. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="output.css"> <title>Document</title> </head> <body> <div class="border border-red h-screen flex justify-center items-center"> <div class="container mx-auto px-4 py-8"> <div class="grid grid-cols-4 gap-4"> <div class="bg-gray-200 p-4"> <img src="../image-1.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 1</h2> <p class="text-gray-600">Deskripsi Produk 1</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-2.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 2</h2> <p class="text-gray-600">Deskripsi Produk 2</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-3.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 3</h2> <p class="text-gray-600">Deskripsi Produk 3</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-4.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 4</h2> <p class="text-gray-600">Deskripsi Produk 4</p> </div> </div> </div> </div> </div> </body> </html> Memberikan Responsive pada Komponen Card Untuk memberikan efek responsive kita perlu menggunakan breakpoint yang telah tersedia pada Tailwind “sm” kita gunakan jika layar memiliki ukuran sebesar minimal 640px. Pada ukuran tersebut kita akan memberikan ukuran kolom pada grid sebesar dua kolom, sedangkan untuk ukuran “md” yang akan berubah jika ukuran layar memiliki ukuran minimal 768px dan kita akan memberikan ukuran kolom grid sebesar 3 kolom, dan untuk ukuran “lg” yang akan berubah jika ukuran layar memiliki ukuran minimal 1024px yang akan memberikan ukuran kolom grid sebesar 4 kolom. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="output.css"> <title>Document</title> </head> <body> <div class="border border-red h-screen flex justify-center items-center"> <div class="container mx-auto px-4 py-8"> <div class="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 "> <div class="bg-gray-200 p-4"> <img src="../image-1.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 1</h2> <p class="text-gray-600">Deskripsi Produk 1</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-2.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 2</h2> <p class="text-gray-600">Deskripsi Produk 2</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-3.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 3</h2> <p class="text-gray-600">Deskripsi Produk 3</p> </div> </div> <div class="bg-gray-200 p-4"> <img src="../image-4.jpeg" alt=""> <div class="p-3"> <h2 class="text-xl">Produk 4</h2> <p class="text-gray-600">Deskripsi Produk 4</p> </div> </div> </div> </div> </div> </body> </html> Contoh tampilan di berbagai ukuran: Tampilan pada ukuran website Tampilan pada ukuran tablet Tampilan pada ukuran mobile Kesimpulan Dalam implementasi desain responsif dengan Tailwind, kita dapat menggunakan kelas “grid” untuk tata letak yang responsif dan menarik. Dengan memanfaatkan properti “min-width” dan kelas-kelas utilitas yang sesuai, kita dapat memastikan bahwa elemen-elemen penting dalam tampilan web tetap terlihat dengan baik, bahkan pada layar yang lebih kecil. Agar dapat lebih memahami penggunaan Tailwind kamu dapat mengikuti kelas CSS Tailwind Web Design dan Master Class: React JS dan Tailwind CSS Website Development pada website buildwithangga.com

Kelas 5 Fungsi Utama Software Postman API di BuildWithAngga

5 Fungsi Utama Software Postman API

Postman API adalah sebuah alat pengembangan dan pengujian aplikasi yang populer dalam dunia pengembangan perangkat lunak. Postman API dirancang untuk membantu pengembang dalam membangun, menguji, dan mendokumentasikan API. API adalah sekumpulan aturan dan protokol yang memungkinkan berbagai aplikasi berkomunikasi satu sama lain. Dalam pengembangan perangkat lunak, API memungkinkan aplikasi untuk berinteraksi dengan aplikasi lain dengan cara yang terstruktur dan terstandarisasi. 5 Fungsi Utama Software Postman API Postman API menyediakan antarmuka pengguna yang intuitif dan lengkap untuk mengelola, mengirim, dan menerima permintaan API. Anda dapat menggunakannya untuk mengirim permintaan HTTP seperti GET, POST, PUT, dan DELETE ke endpoint API yang ditentukan, serta untuk mengirim dan menerima data dalam berbagai format seperti JSON dan XML. Mengirim HTTP Request kepada Server Contoh request dengan metode GET HTTP Request adalah sebuah permintaan yang dilakukan dari sisi klien kepada server menggunakan protokol HTTP. Ada beberapa metode yang untuk melakukan HTTP Request sebagai contoh jika kamu ingin mengambil sebuah data maka kamu perlu menggunakan metode GET, sedangkan jika kamu ingin mengirim sebuah data kamu bisa menggunakan metode POST, untuk mengupdate sebuah data kamu bisa menggunakan metode PUT, dan jika kamu ingin menghapus data kamu bisa menggunakan metode DELETE. Pengujian Terhadap Response Yang Diterima Postman API menyediakan alat pengujian yang kuat untuk memvalidasi respons API. Anda dapat memeriksa status kode, header, dan data yang diterima dari permintaan API. Ini memungkinkan kamu untuk menguji fungsionalitas dan memastikan bahwa API bekerja dengan benar. Sebagai contoh kita akan mencoba untuk melakukan testing terhadap respon yang telah kita terima sebelumnya, kita akan menguji apakah response yang kita dapat memiliki status code 200 yang berarti respon telah sukses diberikan. Kita akan menuliskan kode seperti di bawah ini di bagian Test yang ada pada aplikasi Postman untuk menguji respon yang diberikan. pm.test("Status code is 200", function () { pm.response.to.have.status(200); }); Dan hasilnya akan seperti berikut. Contoh testing pada postman Membuat Mock Server Contoh pembuatan mock server pada postman Mock server pada Postman adalah fitur yang memungkinkan Anda membuat server tiruan yang dapat mensimulasikan respons API tanpa perlu mengakses server asli atau melibatkan pengembangan penuh dari sisi server. Dengan menggunakan mock server, kamu dapat menguji permintaan API dan merancang respons yang diharapkan tanpa perlu menunggu atau mengandalkan server yang sebenarnya. Mock server memungkinkan Anda membuat skenario respons API yang berbeda berdasarkan permintaan yang diterima. Anda dapat menentukan respons yang ingin dikirimkan oleh mock server, termasuk status kode, header, dan tubuh respons. Ini memungkinkan kamu untuk mensimulasikan berbagai kasus pengujian dan melihat bagaimana klien berinteraksi dengan respons yang berbeda. Membuat Dokumentasi API Contoh dokumentasi API pada postman Dokumentasi API pada Postman API adalah fitur yang memungkinkan kamu untuk membuat dokumentasi yang terstruktur dan mudah dibaca untuk API yang Anda buat atau gunakan. Dokumentasi API ini berfungsi sebagai panduan penggunaan dan referensi bagi developer atau pengguna lain yang ingin berinteraksi dengan API tersebut. Dokumentasi API pada Postman API membantu dalam berbagi dan memahami penggunaan API. Dengan dokumentasi yang baik, pengguna atau pengembang lain dapat dengan mudah memahami cara menggunakan API, melihat contoh permintaan dan respons, serta memahami parameter dan header yang dibutuhkan. Hal ini memfasilitasi kolaborasi tim dan meningkatkan adopsi dan penggunaan API secara keseluruhan. Mengatur Environtment pada Postman Dalam Postman, kamu dapat membuat lingkungan (environment) untuk menyimpan nilai variabel yang spesifik untuk setiap lingkungan, seperti lingkungan pengembangan, produksi, atau uji. Misalnya, jika Anda bekerja dengan API yang memiliki URL yang berbeda di lingkungan pengembangan dan produksi, Anda dapat menyimpan URL ini sebagai variabel dalam masing-masing lingkungan. Dengan cara ini, Anda dapat dengan mudah mengubah nilai variabel sesuai dengan lingkungan yang ingin Anda gunakan. Selain URL, variabel-variabel lain yang umum disimpan dalam environment Postman meliputi token otentikasi, header, parameter, dan body dari permintaan HTTP. Anda dapat merujuk ke variabel-variabel ini dengan menggunakan sintaks {{nama_variabel}} dalam permintaan Anda, dan Postman akan menggantikan variabel-variabel ini dengan nilai yang tepat saat Anda menjalankan permintaan. Conton membuat variabel pada environtment postman Sebagai contoh, kita telah membuat sebuah environtment bernama “BWA test” kemudian kita membuat sebuah variabel “url” yang memiliki nilai berupa url https://jsonplaceholder.typicode.com yang akan memberikan kita respon berupa data. Sehingga pada saat kita ingin melakukan request pada url tersebut kita tidak perlu menuliskan alamat url nya secara lengkap, cukup dengan menuliskan nama variabel yang telah kita buat pada environtment. Contohnya sebagai berikut. Kesimpulan Dalam rangka pengembangan dan pengujian API yang efisien, Postman menjadi alat yang penting bagi para pengembang. Dengan lima fungsi utama yang telah kita bahas dalam artikel ini, yaitu pengujian endpoint, pengaturan dan pemantauan koleksi permintaan, dokumentasi API, kolaborasi tim, dan lingkungan pengembangan yang dapat dipersonalisasi, Postman API menjadi solusi yang kuat dan efektif bagi para pengembang dalam mengelola dan memperbaiki API mereka. Untuk mengetahui lebih lanjut mengenai Postman API kamu dapat mengikuti kelas Full-Stack Laravel Flutter 2021: Building E-Commerce and Chat Apps dan Full Stack Flutter Laravel: Laundry Market App dari buildwithangga.com atau kamu juga bisa membaca dokumentasi resmi dari Postman API.

Kelas 10 Contoh CSS Menarik Untuk Website Design di BuildWithAngga

10 Contoh CSS Menarik Untuk Website Design

Dalam membangun sebuah website CSS merupakan salah satu hal yang penting. CSS berperan untuk menciptakan tampilan yang menarik serta dapat membantu pengguna memiliki pengalaman yang menyenangkan saat mengakese website. Dengan menggunakan CSS kamu dapat menentukan ukuran, warna, posisi, dan elemen visual lainnya. 10 Contoh CSS Menarik Untuk Website Design Dalam kesempatan kali ini kami akan memberikan kamu 10 contoh CSS menarik untuk website desiain yang mungkin bisa kamu jadikan sebagai inspirasi saat membuat portofolio website kamu sendiri. 1. Efek Hovering pada Skala Elemen Contoh efek hovering skala Efek hovering skala adalah salah satu cara untuk memberikan respons visual pada elemen saat pengguna mengarahkan kursor ke atasnya. Ketika kursor berada di atas elemen, elemen tersebut akan mengalami perubahan ukuran yang membuatnya terlihat lebih besar atau lebih kecil dari ukuran aslinya. Cara kerja efek hovering skala biasanya menggunakan CSS dengan memanfaatkan properti transform dan transition. Pertama, kita mendefinisikan elemen yang ingin diberi efek hovering skala. Kemudian, kita menetapkan transisi (transition) pada elemen tersebut, yang akan mengatur kecepatan dan gaya animasi perubahan ukuran. Selanjutnya, saat pengguna mengarahkan kursor ke elemen tersebut, kita mengubah properti transform elemen dengan menggunakan pseudoclass :hover pada CSS. Properti transform dengan nilai scale digunakan untuk mengubah ukuran elemen, di mana nilai 1.0 adalah ukuran asli, sedangkan nilai di atas 1.0 akan membuat elemen terlihat lebih besar dan nilai di bawah 1.0 akan membuat elemen terlihat lebih kecil. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="scale-effect"> <h2>Elemen dengan Efek Skala</h2> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } .scale-effect { transition: transform 0.3s ease; } .scale-effect:hover { transform: scale(1.2); } 2. Efek Loading Pada Button Contoh efek loading pada button Pada contoh di atas, tombol dengan kelas "loading-button" dibuat dengan menggunakan CSS. Efek animasi loading diimplementasikan dengan menggunakan pseudo-elemen :before. Pseudo-elemen ini memiliki animasi yang memindahkan posisinya dari kiri ke kanan sejauh 100% lebar tombol dalam waktu 2 detik. Latar belakang pseudo-elemen tersebut memiliki warna semi-transparan untuk memberikan efek loading yang terlihat di belakang teks tombol. Anda dapat menyesuaikan ukuran tombol, warna latar belakang, dan gaya lainnya sesuai dengan preferensi desain kamu. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <h1 class="creative-text">Welcome to <span>My Website</span></h1> </div> </div> </div> </body> </html> .container{ height: 100vh; } .creative-text { font-size: 48px; color: #333; text-align: center; } .creative-text span { display: inline-block; font-size: 60px; color: #4CAF50; animation: textAnimation 2s ease-in-out infinite; } @keyframes textAnimation { 0% { transform: scale(1); color: #4CAF50; } 50% { transform: scale(1.2); color: #FFC107; } 100% { transform: scale(1); color: #4CAF50; } } 3. Efek pada Typography Contoh efek pada typography Pada contoh di atas, elemen judul <h1> dengan kelas "creative-text" memiliki teks "Welcome to" diikuti dengan elemen <span> yang berisi teks "My Website". Efek animasi kreatif diterapkan pada elemen <span> menggunakan CSS. Animasi tersebut mengubah ukuran teks dan warna pada dua tahap yaitu saat 50% dan 100% dari animasi. Teks akan memperbesar ukurannya dan berubah warna menjadi kuning pada tahap pertama, kemudian kembali ke ukuran semula dan warna hijau pada tahap kedua. Animasi ini akan berulang secara terus-menerus menggunakan infinite pada properti animation. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <h1 class="creative-text">Welcome to <span>My Website</span></h1> </div> </div> </div> </body> </html> .container{ height: 100vh; } .creative-text { font-size: 48px; color: #333; text-align: center; } .creative-text span { display: inline-block; font-size: 60px; color: #4CAF50; animation: textAnimation 2s ease-in-out infinite; } @keyframes textAnimation { 0% { transform: scale(1); color: #4CAF50; } 50% { transform: scale(1.2); color: #FFC107; } 100% { transform: scale(1); color: #4CAF50; } } 4. Efek hovering pada Button Contoh efek hovering pada button Pada contoh di atas, kita menggunakan CSS untuk memberikan efek gelombang pada tombol saat dihover. Kelas "wave-button" diterapkan pada elemen <button> untuk menerapkan gaya tombol. Properti position: relative; digunakan untuk mengatur elemen sejajar dengan posisinya yang asli. Pseudo-elemen ::before digunakan untuk membuat latar belakang gelombang. Pada kode ini, kita mengatur posisi latar belakang ke tengah tombol menggunakan transformasi translate(-50%, -50%);. Lebar dan tinggi latar belakang awalnya diatur sebagai 0 sehingga tidak terlihat. Pada saat hover (:hover), kita mengubah lebar dan tinggi latar belakang menjadi 200% sehingga menciptakan efek gelombang yang membesar. Selain itu, kita mengatur opasitas menjadi 1 sehingga latar belakang terlihat dengan transparansi. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <button class="wave-button">Click Me</button> </div> </div> </div> </body> </html> .container{ height: 100vh; } .wave-button { position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #4CAF50; border: none; cursor: pointer; overflow: hidden; } .wave-button:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); opacity: 0; pointer-events: none; transition: all 0.5s ease; } .wave-button:hover:after { width: 200%; height: 200%; opacity: 1; } 5. Efek overlay pada image Efek overlay pada image Pada contoh di atas, kita menggunakan CSS untuk memberikan efek overlay pada gambar saat dihover. Di dalam kontainer gambar (<div class="image-container">), kita meletakkan elemen gambar (<img>) dan elemen overlay (<div class="overlay">). Kelas "image-container" diterapkan pada elemen kontainer untuk mengatur posisi relatif dan tata letak inline-block. Kelas "overlay-image" diterapkan pada elemen gambar untuk memastikan bahwa gambar menempati seluruh lebar kontainer. Kelas "overlay" diterapkan pada elemen overlay dan menggunakan properti position: absolute; untuk mengatur posisi absolut di atas gambar. top: 0; left: 0; digunakan untuk mengatur posisi overlay di pojok kiri atas kontainer. Background color diatur dengan rgba(0, 0, 0, 0.5) yang mewakili warna hitam dengan tingkat transparansi 0.5. Awalnya, kita mengatur opasitas overlay menjadi 0 sehingga tidak terlihat. Namun, saat dihover (:hover), kita mengubah opasitas menjadi 1 sehingga overlay terlihat dengan transparansi. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="image-container"> <img src="gambar.jpeg" alt="Gambar" class="overlay-image" > <div class="overlay"> <h1 class="text-overlay">hello world</h1> </div> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } .image-container { position: relative; display: inline-block; } .overlay-image { display: block; width: 500px; height: auto; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; } .image-container:hover .overlay { opacity: 1; } .text-overlay{ color: white; } 6. Membuat Carousel menggunakan CSS Contoh efek carousel menggunakan CSS Pada contoh di atas di bagian kode HTML <div class="wrapper">: Ini adalah elemen pembungkus yang mengelilingi elemen carousel. Ini diperlukan untuk membuat efek overlay pada tombol navigasi. Anda dapat menerapkan gaya dan memodifikasi elemen ini sesuai kebutuhan desain Anda. <div class="carousel" tabindex="0">: Ini adalah elemen utama carousel yang memiliki kelas "carousel". Properti tabindex="0" diberikan untuk membuat elemen ini dapat menerima fokus saat interaksi keyboard. Ini memungkinkan pengguna menggunakan tombol panah untuk menggulir melalui slide. Kemudian untuk <div class="slide">: Ini adalah elemen slide dalam carousel. Setiap slide terdiri dari gambar dan tautan navigasi yang terletak di atas dan di bawah gambar. Anda dapat menambahkan lebih banyak elemen atau mengubah tampilan slide sesuai kebutuhan. <a href="#item-4">Slide 4</a>: Ini adalah tautan navigasi di dalam slide. Setiap tautan memiliki atribut href yang mengarahkan ke slide tertentu. Misalnya, tautan ini mengarahkan ke slide dengan ID "item-4". Anda dapat mengubah teks tautan dan mengatur href sesuai dengan kebutuhan. Selanjutnya <img id="item-1" src="<https://source.unsplash.com/random/800x500?1>" alt="">: Ini adalah elemen gambar dalam slide. Setiap gambar memiliki atribut src yang menunjukkan sumber gambar dan atribut alt yang memberikan teks alternatif untuk aksesibilitas. ID pada gambar yang sesuai dengan href pada tautan navigasi memungkinkan navigasi yang tepat saat menggunakan tombol panah. Kemudian pada bagian CSS Kelas .carousel digunakan untuk elemen carousel utama. Ini diberi properti position: relative; untuk mengatur posisi relatif terhadap konten sekitarnya dan display: flex; untuk mengatur tampilan elemen-elemen dalam satu baris. overflow-x: auto; mengaktifkan guliran horizontal jika kontennya melebihi lebar kontainer. Sementara itu, scroll-behavior: smooth; memberikan efek animasi saat bergeser, dan scroll-snap-type: x mandatory; mengaktifkan snap saat menggulir ke elemen-elemen carousel. Properti lain seperti z-index dan :focus diberikan untuk memberikan gaya tambahan saat interaksi dengan carousel. Selanjutnya Kelas .wrapper digunakan sebagai pembungkus elemen carousel untuk menciptakan efek overlay pada tombol navigasi. Elemen ini menggunakan pseudo-elemen ::before dan ::after untuk membuat tampilan anak panah yang muncul di sisi kiri dan kanan carousel. Properti seperti position, width, height, background-image, dan z-index diberikan untuk mengatur tampilan dan posisi anak panah. Kelas .slide mengatur tampilan setiap slide dalam carousel. Elemen-elemen ini memiliki properti position: relative; untuk mengatur posisi relatif terhadap elemen carousel dan flex: 1 0 100%; untuk memastikan setiap slide mengisi lebar penuh carousel. scroll-snap-align: center; mengatur bahwa setiap slide akan selalu muncul di tengah saat bergeser. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="wrapper"> <div class="carousel" tabindex="0"> <div class="slide"> <a href="#item-4">Slide 4</a> <img id="item-1" src="<https://source.unsplash.com/random/800x500?1>" alt=""> <a href="#item-2">Slide 2</a> </div> <div class="slide"> <a href="#item-1">Slide 1</a> <img id="item-2" src="<https://source.unsplash.com/random/800x500?2>" alt=""> <a href="#item-3">Slide 3</a> </div> <div class="slide"> <a href="#item-2">Slide 2</a> <img id="item-3" src="<https://source.unsplash.com/random/800x500?3>" alt=""> <a href="#item-4">Slide 4</a> </div> <div class="slide"> <a href="#item-3">Slide 3</a> <img id="item-4" src="<https://source.unsplash.com/random/800x500?4>" alt=""> <a href="#item-1">Slide 1</a> </div> </div> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } * { box-sizing: border-box; } body { max-width: 50rem; margin: 0 auto; padding: 2rem; } img { max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } .carousel { position: relative; display: flex; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; z-index: 0; } .carousel:focus { outline: 0.25rem solid hsl(220, 60%, 60%); outline-offset: 0.25rem; } .wrapper { position: relative; } .wrapper::before, .wrapper::after { --size: 2rem; content: ''; display: block; position: absolute; width: var(--size); height: 100%; top: 0; left: 0.5rem; padding: 0.25rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 10 10" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2 L2 5 L7 8" /></svg>'); background-size: contain; background-repeat: no-repeat; background-position: center center; color: #fff; z-index: 10; pointer-events: none; } .wrapper::after { left: auto; right: 0.5rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 10 10" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round"><path d="M2 2 L7 5 L2 8" /></svg>'); } .slide { position: relative; flex: 1 0 100%; scroll-snap-align: center; } .slide a { position: absolute; top: 0; width: 3rem; height: 100%; display: grid; place-items: center; font-size: 0; } .slide a:last-of-type { top: 0; right: 0; } .carousel img { display: block; width: 100%; height: 100%; object-fit: cover; } .carousel__nav ul { margin-top: -3rem; display: flex; justify-content: center; align-items: center; position: relative; } .carousel__nav a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: white; text-decoration: none; text-shadow: 1px 1px 0 hsla(220, 20%, 20%, 0.5); } 7. Efek gradient pada background Contoh efek gradient menggunakan CSS Pada contoh di atas digunakan untuk membuat efek latar belakang berupa gradasi warna yang bergerak secara animasi. Ketika kode ini diterapkan pada elemen <body> dalam HTML, latar belakang akan berubah-ubah dengan perpindahan warna yang mengikuti pola linear gradient. Pada bagian pertama, properti "background" digunakan untuk mengatur latar belakang dengan menggunakan linear gradient. Warna yang digunakan adalah akan bertransisi dari satu warna ke warna lainnya. Selanjutnya, properti "background-size" dengan nilai 400% 400% menentukan ukuran latar belakang. Dalam hal ini, latar belakang akan mengisi 400% lebar dan 400% tinggi dari elemen <body> yang sedang digunakan. Animasi pada latar belakang ini ditentukan oleh properti "animation" dengan nilai "gradient 15s ease infinite". Properti ini menandakan bahwa animasi dengan nama "gradient" akan berlangsung selama 15 detik dengan perpindahan warna yang lancar. Kata kunci "infinite" mengindikasikan bahwa animasi akan berputar secara terus-menerus. Selanjutnya, properti "height" dengan nilai 100vh menentukan tinggi elemen <body> sebesar 100% dari tinggi tampilan viewport. Ini memberikan efek latar belakang yang memenuhi seluruh layar. Setelahnya, deklarasi "@keyframes gradient" digunakan untuk mendefinisikan animasi tersebut. Pada bagian ini, terdapat tiga peraturan untuk animasi dalam bentuk persentase: 0%, 50%, dan 100%. Setiap peraturan menentukan posisi latar belakang gradasi pada waktu tertentu. Pada 0%, latar belakang berada pada posisi 0% 50% (posisi horizontal 0% dan posisi vertikal 50%). Pada 50%, latar belakang berpindah ke posisi 100% 50%. Pada 100%, latar belakang kembali ke posisi awal yaitu 0% 50%. Dengan demikian, gradasi warna pada latar belakang akan bergerak dari kiri ke kanan dan kembali lagi dalam interval waktu animasi yang ditentukan. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="d-flex flex-column justify-content-center w-100 h-100"> <div class="d-flex flex-column justify-content-center align-items-center"> <h1 class="fw-light text-white m-0">Efek gradient pada background</h1> </div> </div> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; height: 100vh; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } 8. Efek Lightbox pada gambar Contoh efek lightbox menggunakan CSS Lightbox adalah suatu fitur atau elemen pada sebuah website yang menampilkan konten tambahan atau gambar dalam jendela yang terpisah atau teroverlay di atas halaman utama. Ketika pengguna mengklik atau mengaktifkan suatu elemen tertentu, seperti gambar thumbnail atau tautan, lightbox akan muncul dengan konten yang lebih besar atau informasi tambahan. Umumnya, lightbox menampilkan gambar dengan ukuran yang lebih besar sehingga pengguna dapat melihat rincian yang lebih baik. Konten tambahan, seperti deskripsi, tombol navigasi, atau video, juga dapat ditampilkan dalam lightbox. Lightbox biasanya mengaburkan atau menggelapkan latar belakang halaman web utama untuk menyoroti konten yang sedang ditampilkan dan memberikan fokus kepada pengguna. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> <p>Klik untuk menampilkan efek lightbox</p> <a href="#img1"> <img src="https://picsum.photos/seed/9/500/300"> </a> <a href="#" class="lightbox" id="img1"> <span style="background-image: url('https://picsum.photos/seed/9/900/450')"></span> </a> </div> </div> </div> </body> </html> .container{ height: 100vh; } html,body { font-family: sans-serif; padding: 0 1em; font-size: 19px; background: #222; color: #aaa; text-align:center; } p { margin: 1.5em 0; color: #aaa; } img { max-height: 50vh; } a { color: inherit; } a:hover { color: #bbb; } .italic { font-style: italic; } .small { font-size: 0.8em; } .lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; padding: 1em; background: rgba(0, 0, 0, 0.8); } .lightbox:target { display: block; } .lightbox span { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; } 9. Select Box dengan CSS Contoh select box menggunakan CSS Dalam contoh di atas, kita menggunakan elemen <div> sebagai wadah (container) untuk select box. Properti CSS position: relative; diterapkan pada wadah tersebut agar kita dapat menggunakan properti CSS position: absolute; pada elemen select nanti. Pada elemen <select>, kita memberikan beberapa properti CSS seperti lebar (width), padding, ukuran font (font-size), border, dan border radius untuk menciptakan tampilan yang diinginkan. Properti appearance: none; digunakan untuk menghilangkan styling bawaan dari browser, sehingga kita dapat mengkustomisasi tampilan select box sesuai keinginan. Properti :focus digunakan untuk mengubah tampilan saat select box dalam keadaan focus, seperti menghilangkan outline dan mengubah warna border. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="select-box"> <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> <option value="option4">Option 4</option> </select> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } .select-box { position: relative; display: inline-block; } .select-box select { width: 200px; padding: 10px; font-size: 16px; border: 2px solid #181818; border-radius: 4px; background-color: #fff; appearance: none; } .select-box select:focus { outline: none; border-color: #4a90e2; } 10. Membuat Accordion dengan CSS Contoh Accordion menggunakan CSS Accordion pada web adalah elemen interaktif yang digunakan untuk menyajikan konten dalam bentuk daftar yang dapat diperluas dan disusutkan. Umumnya, accordion terdiri dari beberapa item atau panel yang terdiri dari header dan konten terkait. Saat pengguna mengklik header, konten terkait akan muncul atau disembunyikan dengan animasi yang halus. Tujuan utama dari accordion adalah untuk mengatur dan menyajikan konten secara terstruktur, mengurangi tampilan yang berlebihan, dan memberikan pengalaman pengguna yang lebih interaktif. Accordion sangat berguna ketika kita memiliki banyak informasi yang ingin disajikan dalam ruang yang terbatas, sehingga pengguna dapat fokus pada konten yang relevan dengan kemampuan untuk memperluas konten tambahan jika diperlukan. Accordion sering digunakan dalam halaman FAQ (Frequently Asked Questions) atau dalam menu navigasi dengan submenu yang dapat diperluas. Dengan menggunakan teknik HTML, CSS, dan JavaScript, kita dapat membuat accordion yang responsif dan dapat diakses pada berbagai perangkat. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap>" rel="stylesheet"> <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Document</title> </head> <body> <div class="container d-flex justify-content-center align-items-center"> <div class="row"> <div class="col"> <div class="accordion"> <input id="toggle1" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle1">Pure CSS Accordion 1</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle2" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle2">Pure CSS Accordion 2</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle3" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle3">Pure CSS Accordion 3</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> <div class="accordion"> <input id="toggle4" type="radio" class="accordion-toggle" name="toggle" /> <label for="toggle4">Pure CSS Accordion 4</label> <section> <p> Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. </p> <p> Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. </p> </section> </div> </div> </div> </div> </body> </html> .container{ height: 100vh; } @import url("<https://fonts.googleapis.com/css?family=Open+Sans:400,700>"); @import url("<https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css>"); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 'Open Sans', sans-serif; color: #555; background: #e5e5e5; } body { padding: 50px; } .accordion{ transform: translateZ(0); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background: #fff; } .accordion > .accordion-toggle{ position: absolute; opacity: 0; display: none; } .accordion > label{ position: relative; display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; font-weight: 700; border-top: 1px solid #ddd; background: #fff; cursor: pointer; } .accordion > label:after { content: '\\f078'; position: absolute; top: 0px; right: 20px; font-family: fontawesome; transform: rotate(90deg); transition: .3s transform; } .accordion > section{ height: 0; transition: .3s all; overflow: hidden; } .accordion > .accordion-toggle:checked ~ label:after{ transform: rotate(0deg); } .accordion > .accordion-toggle:checked ~ section{ height: 200px; } .accordion > section p { margin: 15px 0; padding: 0 20px; font-size: 12px; line-height: 1.5; } Kesimpulan Dalam artikel ini, kita telah menjelajahi 10 contoh CSS menarik yang dapat digunakan untuk mendesain website dengan tampilan yang menarik. Dari efek hover hingga animasi kompleks, CSS memiliki beragam fitur yang dapat memperkaya pengalaman pengguna dan meningkatkan daya tarik visual suatu halaman web. Tentu beberapa contoh tersebut bisa kamu kembangkan lagi untuk website kamu sendiri. Agar lebih menguasai Styling menggunakan CSS kamu dapat mengikuti Kelas Dasar CSS atau kamu bisa mencoba membuat sebuah projek dengan mengikuti kelas HTML CSS Bootstrap 5: Finance Landing Page Website yang bisa kamu ikutin di website Build With Angga.