Halo Koders, pada tutorial kali ini kita akan belajar bagaimana menambahkan template base, membuat component navbar Bootstrap dan kita juga akan belajar bagaimana mengubah tampilan pada halaman utama.

Halaman utama kita gunakan untuk starting point aplikasi kita. Di halaman halaman utama kita bakal nambahin:

  1. Menu New Order (berupa link buat bikin order baru).
  2. Menu Active Order (berupa link buat melihat order yang aktif).

Menambahkan Template Base

Dimana template base kita gunakan sebagai template utama untuk template-template lainnya. Dengan begitu, desain kita nanti bisa lebih konsisten.

Buat file baru di dalam folder templates dengan nama base.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{%…

Imagine that you have just completed the first version of your eCommerce application using Django and PostgreSQL. Today, you are releasing the application. There are already thousands of product data in it. Everyone comes to visit your eCommerce site. However, when searching for thousands of products, your search feature may not be as effective.

Your friends suggest, “Use SOLR or Elasticsearch.” You might consider two of these technologies. However, in the end you don’t choose either because it will take installation and configuration time.

Dont worry. You don’t choose either, but you can make searches within your eCommerce site effectively…


If you want to give your Django project to a colleagues, maybe! Or anyone. You may be thinking, “yes, they’ll try my project”. Any application will look good if you have data in it.

Imagine, if you create a “Blog” application. You show off to your colleagues. Your colleague is interested and says “What’s your repo?”, Then you give your repo link to clone.

Your colleagues will clone your repo and try out your application. But, the first impression will be really annoying. Because your colleagues have to fill in data or writing one by one on your blog application…


Pada catatan sebelumnya kita sudah mempelajari bagaimana menggunakan Scaffold. Scaffold berisi fungsionalitas dasar untuk aplikasi Android yang berisi AppBar, Body dan Drawer yang tampilannya itu Material banget. Ada kalanya kita kepengen bikin tampilan seperti iOS, kita bisa menggunakan Cupertino.

Coba buka lagi project yang udah kita buat di catatan sebelumnya tentang scaffold. Ubah kodenya menjadi:

import 'package:flutter/cupertino.dart';

main() => runApp(AppBelajarScaffold());

class AppBelajarScaffold extends StatelessWidget {
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(),
child: Center(
child: Text('Halo Cupertino'),
),
),
);

}
}

Jalankan project dan hasilnya:


Pada kesempatan ini kita akan belajar tentang Scaffold. Mari kita buat terlebih dahulu project Flutter yang baru di Android Studio. Untuk membuat project, Anda bisa melihatnya di catatan saya sebelumnya di sini.

Buka file main.dart dan ganti kodenya menjadi kode berikut:

import 'package:flutter/material.dart';

main() => runApp(AppBelajarScaffold());

class AppBelajarScaffold extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Belajar Scaffold'),
),
body: Center(
child: Text('Halo Scaffold'),
),
drawer: Drawer(
child: Center(
child: Text('Ini adalah Drawer'),
),
),
)

);
}
}

Jika kita jalankan, hasilnya akan terlihat seperti gambar berikut:


Kita tidak mungkin hafal tentang seluruh class, keyword dan fungsi di dalam Flutter. Ingat pun karena terbiasa menggunakannya. Jika kita lupa, kita bisa membuka dokumentasi Flutter di https://api.flutter.dev/.

Misalnya jika kita ingin mencari parameter apa saja yang ada di dalam class Text , Kita bisa membuka link https://api.flutter.dev/flutter/widgets/Text-class.html atau bisa search di halaman depan dokumentasi Flutter dengan kata kunci Text.


Flutter dibuat dengan Dart dan tidak akan bisa lepas dari Dart. Bahasa Dart merupakan bahasa pemrograman berorientasi object. Jadi Dart pada dasarnya memiliki class dan object.

Jika kita perhatikan pada contoh project sebelumnya pada file main.dart:

import 'package:flutter/material.dart';

main() => runApp(AplikasiHaloDunia());

class AplikasiHaloDunia extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: Text(
'Halo Dunia!',
textScaleFactor: 4.0,
style: TextStyle(fontSize: 28.0),
),
)
);
}
}

AplikasiHaloDunia, StatelessWidget, Widget, BuildContext, MaterialApp, Material danText adalah class.

Class akan berarti, ketika…

Perlu kita ketahui, sebuah class tidaklah berati sebelum kita memanggilnya (membuat instance). …


Pada kesempatan kali ini kita akan belajar tentang parameter pada constructor. Parameter yang kita pelajari adalah Potitional Parameter dan Named Parameter. Agar mudah memahaminya, mari ikuti tutorial ini.

Buka kembali project yang sudah kita buat di catatan sebelumnya. Coba perhatikan kode di dalam file main.dart:

import 'package:flutter/material.dart';main() => runApp(AplikasiHaloDunia());class AplikasiHaloDunia extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: Text('Halo Dunia!'),
)
);
}
}

Coba kita tambahkan parameter textScaleFactor di dalam Text setelah Halo Dunia!:

Text('Halo Dunia!', textScaleFactor: 4.0)

Jalankan project dan hasilnya akan terlihat seperti pada gambar berikut:

Text Scale Factor

Parameter Halo Dunia adalah parameter…


Pada kesempatan kali ini kita akan belajar bagaimana membuat project Flutter dengan Android Studio dan menampilkan pesan Halo Dunia ke layar.

Membuat Project

Pastikan kita sudah membuka Android Studio. Pada jendela Welcome to Android Studio, klik Start a New Flutter Project:

Welcome to Android Studio

Pada jendela selanjutnya, pilih Flutter Application dan klik tombol Next:


During my work with the team, i learned a lot from them. Especially with CTO and my friends there. They taught me by giving a test code that is so beautiful. With Django Factory Boy I can create a shadow object during the testing phase without needing to create objects from the queryset that make it so simple.

This note gives me feedback in the future. I keep using this note for my reference in the code testing phase in Django Framework.

For installation, it’s pretty easy. I only need a package named factory_boy which includes the Faker packages.

(myenv)…

Yanwar

Just ordinary people

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store