Samuel Oliver - Homework 6

HOME WORK 6
Subject Programmer
IF-481: Pemrograman dan Teknologi Integratif Samuel Oliver
Topik Program Studi
HTTP Request Sistem Informasi
Bidang Durasi
- -
Case Study 1: GET

Aplikasi ini akan menampilkan data dari sebuah API pada saat sebuah tombol ditekan dengan
menggunakan metode GET.
Source Code
1 /*Mengimport package*/
2 import 'dart:convert';
3 import 'package:flutter/material.dart';
4 import 'package:http/http.dart' as http;
6 void main() {
7 /*Menjalankan kelas MyApp*/
8 runApp(MyApp());
9 }
10
11 class MyApp extends StatelessWidget {
12 /*Pembuatan variabel bernama MyApp dengan parameter key */
13 const MyApp({Key? key}) : super(key : key);
14
15 @override
16 Widget build(BuildContext context) {
17 return MaterialApp(
18 /*Menetapkan class HomePage sebagai halaman utama */
19 home: HomePage(),
20 );
21 }
22 }
Page 1 of 21
23
24 class HomePage extends StatefulWidget {
25 /*Pembuatan variabel bernama HomePage dengan parameter key */
26 const HomePage({Key? key}) : super(key: key);
27
28 @override
29 /*Pembuatan state yang dimabil dari kelas _HomePageState*/
30 State<HomePage> createState() => _HomePageState();
31 }
32
33 class _HomePageState extends State<HomePage> {
34 /*Tampilan awal jika tidak menekan tombol*/
35 String body = "No Data";
36
37 /*Method untuk menampilakn data dari API */
38 void getData() async {
39 /*Membuat sebuah variabel bernama myResponse yang berisi API yang di-
40 gunakan (Hanya menampilkan user dengan id 3 saja)*/
41 var myResponse = await
42 http.get(Uri.parse("https://jsonplaceholder.typicode.com/users/3"));
43
44 /*Menampilkan data dalam bentuk map */
45 Map<String, dynamic> data = jsonDecode(myResponse.body);
46
47 /*Menetapkan state yang disesuaikan dengan kondisi (Apakah tombol
48 Diklik atau tidak) */
49 setState(() {
50 body = data.toString();
51 });
52 }
53
54 @override
Page 2 of 21
56 return Scaffold(
57 /*Pembuatan floating button yang saat ditekan akan mengeluarkan
58 data melalui method getData()*/
59 floatingActionButton: FloatingActionButton(
60 onPressed: getData,
61 child: Icon(Icons.get_app),
62 ),
63 /*Pembuatan appbar dengan teks “GET” */
64 appBar: AppBar(
65 title: Text("GET"),
66 ),
67 /*Mengatur posisi body berada di tengah */
68 body: Center(
69 child: Text(body),
70 ),
71 );
72 }
73 }
Uji coba program:
Page 3 of 21
Berikut ini adalah tampilan awal dari aplikasi pada saat di jalankan, pada bagian tengah aplikasi
masih tertulis “No data” karena user belum menekan floating button.
Berikut ini adalah tampilan saat user menekan floating button, terlihat ada hasil data yang diambil
dari API dalam bentuk map dengan nomor id 3 yaitu Clementine Bauch.
Page 4 of 21
Case Study 2: Future Builder
Dengan menggunakan source code dari case study sebelumnya, data yang ditampilkan akan muncul
secara otomatis dalam waktu beberapa detik tanpa harus menekan floating button terlebih dahulu
dengan menggunakan method GET.
Source Code
1 /*Mengimpor package*/
6 void main() {
8 runApp(MyApp());
9 }
10
14
15 @override
18 /*Menetapkan class HomePage sebagai halaman utama */
20 );
21 }
22 }
23
27
Page 5 of 21
28 @override
31 }
32
34 /*Pembuatan list baru bernama data yang diinisiasikan dengan array kosong
35 */
36 List data = [];
37
38 /*Penggunaan future untuk menampilkan data dari API*/
39 Future getData() async {
40 /*Menunda penampilan data selama 3 detik sebelum ditampilkan*/
41 await Future.delayed(Duration(seconds: 3));
42
43 /*Membuat sebuah variabel bernama myResponse yang berisi API yang di-
44 Gunakan*/
46 http.get(Uri.parse("https://jsonplaceholder.typicode.com/users"));
47
48 /*Pengkondisian jika koneksi berhasil maka akan menampilkan data, namun
49 jika tidak akan menampikkan teks “Error” */
50 if (myResponse.statusCode == 200) {
51 var dataResponse = json.decode(myResponse.body) as List;
52 data = dataResponse;
53 }
54 else {
55 print("Error");
56 }
57 }
58
59 @override
Page 6 of 21
61 return Scaffold(
62 /*Pembuatan appbar dengan teks “GET*/
63 appBar: AppBar(
64 title: Text("GET"),
65 ),
66 /*Menggunakan FutureBuilder pada bagian body*/
67 body: FutureBuilder(
68 /*Menggunakan future untuk menampilkan data dari kelas getData()*/
69 future: getData(),
70 builder: (context, snapshoot) {
71 */Pengkondisian jika masih dalam durasi delay, maka akan menam-
72 pilkan icon loading */
73 if (snapshoot.connectionState == ConnectionState.waiting) {
74 return Center(child: CircularProgressIndicator());
75 }
76 /*Jika waktu delay telah dilewati, maka akan menampilkan data dari
77 API dalam bentuk listview*/
78 else {
79 return ListView.builder(
80 /*Menampilkan data sesuai dengan jumlah yang ada pada API */
81 itemCount: data.length,
82 itemBuilder: (context, index) {
83 /*Pembuatan variabel bernama dataUser untuk menampilkan kolom
84 pada sebuah data*/
85 final dataUser = data[index];
86 return ListTile(
87 /*Menampilkan nama dari setiap user yang ditampilkan*/
88 title: Text(dataUser['name'],),
89 */Pembuatan avatar berbentuk lingkaran dengan background
90 berwarna abu-abu*/
91 leading: CircleAvatar(
Page 7 of 21
92 backgroundColor: Colors.grey),
93 /*Menampilkan email dari setiap user yang muncul sebagai
94 subtitle*/
95 subtitle: Text(dataUser['email']),
96 );
97 });
98 }
99
100 }
101 )
102 );
103 }
104 }
Uji coba program:
Berikut ini adalah tampilan awal dari aplikasi saat pertama kali di jalankan. Disini akan menampilkan
icon loading selama 3 detik sebelum data ditampilkan secara berseluruh dikarena menggunakan
future.
Page 8 of 21
3 detik kemudian, icon loading akan menghilang dan digantikan oleh seluruh data yang diambil dari
API dalam bentuk list view. Data yang ditampilkan adalah nama dan email user dan dilengkapi oleh
avatar lingkaran pada bagian kiri.
Page 9 of 21
Case Study 3: POST
Aplikasi ini dapat melakukan penambahaan data yaitu title dan body yang dapat disi oleh user
melalui text field dengan menggunakan metode POST.
Source Code
1 /*Mengimpor package*/
2 import 'dart:math';
6 void main() {
8 runApp(MyApp());
9 }
10
13 const MyApp({Key? key}) : super(key: key);
14
15 @override
20 );
21 }
22 }
23
26 const HomePage({Key? key}): super(key: key);
27
28 @override
Page 10 of 21
31 }
32
34 /*Method untuk menambahkan data pada sebuah API*/
35 void postData() async {
36 String url = "https://jsonplaceholder.typicode.com/posts";
37 /*Pembuatan variabel bernama response untuk menampung data yang diinput
38 oleh user yaitu title dan body*/
39 var response = await http.post(Uri.parse(url), body: {
40 /*Id userId akan dipilih secara acak oleh program */
41 'userId': Random().nextInt(10).toString(),
42 'title': inputTitle.text,
43 'body': inputBody.text
44 });
45 /*Mencetak hasil dari penginputan user*/
46 print(response.body);
47 }
48 /*Pembuatan variabel inputTitle dan inputBody untuk pembuatan TextField
49 */
50 var inputTitle = TextEditingController();
51 var inputBody = TextEditingController();
52
53 @override
55 return Scaffold(
56 /*Pembuatan appbar dengan teks “POST” */
57 appBar: AppBar(
58 title: Text("POST"),
59 ),
60
Page 11 of 21
61 /*Menetapkan body pada posisi center*/
62 body: Center(
63 child: Padding(
64 /*Menetapkan padding sebesar 20 pada bagian body */
65 padding: const EdgeInsets.all(20.0),
66 child: Column(
67 /*Menampilkan list data secara vertical (Dari atas ke bawah */
68 mainAxisAlignment: MainAxisAlignment.center,
69 children: [
70 /*Pembuatan TextField dengan tinggi 20*/
71 TextField(controller: inputTitle),
72 TextField(controller: inputBody),
73 SizedBox(
74 height: 20
75 ),
76 /*Pembuatan tombol untuk melakukan proses POST pada data yang
77 telah diinput */
78 ElevatedButton(
79 onPressed: postData,
80 child: Text("POST"),
81 )
82 ],
83 ),
84 ),
85 )
86 );
87 }
88 }
Page 12 of 21
Uji coba program:
Berikut ini adalah tampilan awal dari aplikasi saat pertama kali di jalankan. Disini akan menampilkan
text field yang dapat diisi oleh user dan tombol post.
Disini user menginput header dengan “Text 123” dan body dengan “Hai, ini Samuel”. Pada saat
tombol ditekan, maka secara otomatis akan menampilkan hasil dari data tersebut pada terminal.
UserId 1 diambil random oleh program, sedangkan id disesuaikan dengan API yang sudah ada
sebelumnya.
Page 13 of 21
Case Study 4: DELETE
Aplikasi ini akan menghapuskan data yang berada pada API saat meenekan tombol “DELETE” dan
menampilkan status code dan kondisi id setelah dihapus
Source Code
1 /*Mengimport package*/
6 void main() {
8 runApp(MyApp());
9 }
10
14
15 @override
20 );
21 }
22 }
23
27
28 @override
Page 14 of 21
31 }
32
34 @override
36 return Scaffold(
37 /*Pembuatan appBar dengan teks “DELETED */
38 appBar: AppBar(
39 title: Text("DELETED"),
40 ),
41 /*Menetapkan body pada posisi center*/
42 body: Center(
43 child: Padding(
44 /*Menetapkan padding sebesar 20*/
45 padding: const EdgeInsets.all(20.0),
46 child: Column(
47 /*Menetapkan pada posisi center*/
48 mainAxisAlignment: MainAxisAlignment.center,
49 children: [
50 /*Pembuatan tombol untuk menghapus data dari API */
51 ElevatedButton(
52 onPressed: () async{
53 /*Membuat sebuah variabel bernama myResponse yang berisi API yang akan
54 dihapus (Hanya membuang yang id 1 saja) */
56 http.delete(Uri.parse("https://jsonplaceholder.typicode.com/posts/1"));
57 /*Mencetak statuscode dari penghapusan data*/
58 print(myResponse.statusCode);
59 /*Mencetak isi data setelah dihapus*/
60 print(myResponse.body);
Page 15 of 21
61 },
62 child: Text("DELETED"))
63 ],
64 )
65 ),
66 ),
67 );
68 }
69 }
Uji coba program:
Berikut ini adalah tampilan awal dari aplikasi pada saat di jalankan yang hanya menampilkan tombol
“DELETE” pada bagian tengah body.
Saat tombol ditekan, maka akan keluar output berikut pada terimal. Pada baris pertama
menandakan bahwa penghapusan data berhasil (200 artinya success) sedangkan baris kedua
menandakan bahwa data pada id 1 sudah tidak ada lagi atau kosong.
Page 16 of 21
Case Study 5: Provider
Aplikasi ini akan menampilkan beberapa menu dengan berbagai informasi, gambar dan state hati
dalam bentuk list. Aplikasi ini akan menggunakan provider yang menyediakan Teknik pengolahan Dta
yang dapat digunakan untuk memanage data dalam aplikasi
Source Code – main.dart

1 /*Mengimport package dan data dari beberapa kelas*/
3 import 'package:provider/provider.dart';
4 import 'package:provider_app/provider/all_food.dart';
5 import 'screen/food_screen.dart';
7 void main() {
9 runApp(const MyApp());
10 }
11
14 const MyApp({Key? key}) : super(key: key);
15
16 @override
19 /*Pada contoh ini, provider hanya dapat diakses pada FoodScreen dan
20 child classnya, selain itu tidak dapat diakses */
21 home: ChangeNotifierProvider(
22 create: (context) => Foods(),
23 child: FoodScreen()),
24 );
25 }
26 }
Page 17 of 21
Source Code – food_screen.dart
1 /*Mengimport package dan data dari beberapa kelas*/
3 import 'package:provider/provider.dart';
4 import 'package:provider_app/provider/all_food.dart';
5 import 'package:provider_app/widget/food_item.dart';
7 class FoodScreen extends StatelessWidget {
8 /*Pembuatan method bernama FoodScreen yang dimana variabel key diwariskan
9 dari StatelessWidget*/
10 const FoodScreen({
11 super.key,
12 });
13
14 @override
16 /*Pembuatan variabel baru bernama dataFood untuk menampilkan semua
17 makanan*/
18 final dataFoods = Provider.of<Foods>(context).allFoods;
19 return Scaffold(
20
21 /*Pembuatan appbar dengan teks “Provider*/
22 appBar: AppBar(
23 title: Text("Provider"),
24 ),
25 /*Pembuatan body dalam bentuk list view*/
26 body: ListView.builder(
27 /*Menghitung jumlah makanan yang ada pada data */
28 itemCount: dataFoods.length,
29 itemBuilder: ((context, index) {
30 final food = dataFoods[index];
31
Page 18 of 21
32 /*Mengembalikan id, judul, durasi dan gambar dari data makanan*/
33 return FoodItem(
34 id: food.id,
35 title: food.title,
36 duration: food.duration,
37 imageUrl: food.imageUrl,
38 );
39 })),
40 );
41 }
42 }
Source Code – food_item.dart

1 /*Mengimport package dari kelas lain*/
4 class FoodItem extends StatelessWidget {
5 /*Pembuatan variabel bernama title dengan tipe string, id dengan tipe
6 String, imageUrl dengan tipe string dan duration dengan tipe int*/
7 String title;
8 String id;
9 String imageUrl;
10 int duration;
11
12 /*Pembuatan method dengan nama foodItem yang memiliki parameter key, id,
13 Title, imageUrl dan duration */
14 FoodItem(
15 {Key? key,
16 required this.id,
17 required this.title,
18 required this.imageUrl,
19 required this.duration})
Page 19 of 21
20 : super(key:key);
21
22
23 @override
25 return ListTile(
26 /*Menambahkan icon hati pada setiap makanan*/
27 trailing: Icon(Icons.favorite_border),
28 /*Pembuatan subjudul durasi pada setiap makanan*/
29 subtitle: Text("${duration} min"),
30 /*Pembuatan judul makanan pada setiap makanan */
31 title: Text(title),
32 /*Pembuatan avatar berbentuk lingkaran untuk gambar makanan pada
33 setiap makanan*/
34 leading: CircleAvatar(
35 child: Container(
36 decoration: BoxDecoration(
37 shape: BoxShape.circle,
38 image: DecorationImage(image: NetworkImage(imageUrl),fit:
39 BoxFit.cover),
40 ),
41 ),
42 ),
43 );
44 }
45 }
Page 20 of 21
Uji coba program:
Berikut ini adalah tampilan yang dihasilkan pada saat di jalankan. Disini terdapat beberapa list
makanan yang ditampikan pada bentuk list yang menampilkan nama makanan, durasi makanan,
gambar makanan dan icon hati di setiap listnya.
Page 21 of 21

Samuel Oliver - Homework 6

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Samuel Oliver - Homework 6

Diunggah oleh

Hak Cipta:

Format Tersedia

HOME WORK 6

Case Study 1: GET

4 import 'package:http/http.dart' as http;

7 /*Menjalankan kelas MyApp*/

11 class MyApp extends StatelessWidget {

12 /*Pembuatan variabel bernama MyApp dengan parameter key */

13 const MyApp({Key? key}) : super(key : key);

16 Widget build(BuildContext context) {

18 /*Menetapkan class HomePage sebagai halaman utama */

24 class HomePage extends StatefulWidget {

25 /*Pembuatan variabel bernama HomePage dengan parameter key */

26 const HomePage({Key? key}) : super(key: key);

29 /*Pembuatan state yang dimabil dari kelas _HomePageState*/

30 State<HomePage> createState() => _HomePageState();

33 class _HomePageState extends State<HomePage> {

34 /*Tampilan awal jika tidak menekan tombol*/

35 String body = "No Data";

37 /*Method untuk menampilakn data dari API */

38 void getData() async {

40 gunakan (Hanya menampilkan user dengan id 3 saja)*/

41 var myResponse = await

44 /*Menampilkan data dalam bentuk map */

45 Map<String, dynamic> data = jsonDecode(myResponse.body);

47 /*Menetapkan state yang disesuaikan dengan kondisi (Apakah tombol

48 Diklik atau tidak) */

57 /*Pembuatan floating button yang saat ditekan akan mengeluarkan

58 data melalui method getData()*/

63 /*Pembuatan appbar dengan teks “GET” */

67 /*Mengatur posisi body berada di tengah */

Uji coba program:

4 import 'package:http/http.dart' as http;

7 /*Menjalankan kelas MyApp*/

11 class MyApp extends StatelessWidget {

12 /*Pembuatan variabel bernama MyApp dengan parameter key */

13 const MyApp({Key? key}) : super(key : key);

16 Widget build(BuildContext context) {

18 /*Menetapkan class HomePage sebagai halaman utama */

24 class HomePage extends StatefulWidget {

25 /*Pembuatan variabel bernama HomePage dengan parameter key */

26 const HomePage({Key? key}) : super(key: key);

29 /*Pembuatan state yang dimabil dari kelas _HomePageState*/

30 State<HomePage> createState() => _HomePageState();

33 class _HomePageState extends State<HomePage> {

36 List data = [];

38 /*Penggunaan future untuk menampilkan data dari API*/

39 Future getData() async {

40 /*Menunda penampilan data selama 3 detik sebelum ditampilkan*/

41 await Future.delayed(Duration(seconds: 3));

45 var myResponse = await

48 /*Pengkondisian jika koneksi berhasil maka akan menampilkan data, namun

49 jika tidak akan menampikkan teks “Error” */

51 var dataResponse = json.decode(myResponse.body) as List;

62 /*Pembuatan appbar dengan teks “GET*/

66 /*Menggunakan FutureBuilder pada bagian body*/

68 /*Menggunakan future untuk menampilkan data dari kelas getData()*/

70 builder: (context, snapshoot) {

71 */Pengkondisian jika masih dalam durasi delay, maka akan menam-

72 pilkan icon loading */

74 return Center(child: CircularProgressIndicator());

77 API dalam bentuk listview*/

80 /*Menampilkan data sesuai dengan jumlah yang ada pada API */

82 itemBuilder: (context, index) {

83 /*Pembuatan variabel bernama dataUser untuk menampilkan kolom

7 /Menjalankan kelas MyApp/

12 /Pembuatan variabel bernama MyApp dengan parameter key /

18 /Menetapkan class HomePage sebagai halaman utama /

25 /Pembuatan variabel bernama HomePage dengan parameter key /

29 /Pembuatan state yang dimabil dari kelas _HomePageState/

34 /Tampilan awal jika tidak menekan tombol/

37 /Method untuk menampilakn data dari API /

44 /Menampilkan data dalam bentuk map /

63 /Pembuatan appbar dengan teks “GET” /

67 /Mengatur posisi body berada di tengah /

7 /Menjalankan kelas MyApp/

12 /Pembuatan variabel bernama MyApp dengan parameter key /

18 /Menetapkan class HomePage sebagai halaman utama /

25 /Pembuatan variabel bernama HomePage dengan parameter key /

29 /Pembuatan state yang dimabil dari kelas _HomePageState/

38 /Penggunaan future untuk menampilkan data dari API/

40 /Menunda penampilan data selama 3 detik sebelum ditampilkan/

62 /Pembuatan appbar dengan teks “GET/

66 /Menggunakan FutureBuilder pada bagian body/

68 /Menggunakan future untuk menampilkan data dari kelas getData()/

80 /Menampilkan data sesuai dengan jumlah yang ada pada API /

87 /Menampilkan nama dari setiap user yang ditampilkan/

7 /Menjalankan kelas MyApp/

12 /Pembuatan variabel bernama MyApp dengan parameter key /

18 /Pembuatan variabel bernama HomePage dengan parameter key /

25 /Pembuatan variabel bernama HomePage dengan parameter key /

34 /Method untuk menambahkan data pada sebuah API/

40 /Id userId akan dipilih secara acak oleh program /

45 /Mencetak hasil dari penginputan user/

56 /Pembuatan appbar dengan teks “POST” /

64 /Menetapkan padding sebesar 20 pada bagian body /

67 /Menampilkan list data secara vertical (Dari atas ke bawah /

70 /Pembuatan TextField dengan tinggi 20/

7 /Menjalankan kelas MyApp/

12 /Pembuatan variabel bernama MyApp dengan parameter key /

18 /Pembuatan variabel bernama HomePage dengan parameter key /

25 /Pembuatan variabel bernama HomePage dengan parameter key /

37 /Pembuatan appBar dengan teks “DELETED /

41 /Menetapkan body pada posisi center/

44 /Menetapkan padding sebesar 20/

47 /Menetapkan pada posisi center/

50 /Pembuatan tombol untuk menghapus data dari API /

57 /Mencetak statuscode dari penghapusan data/

59 /Mencetak isi data setelah dihapus/

8 /Menjalankan kelas MyApp/

13 /Pembuatan variabel bernama MyApp dengan parameter key /