PROJECT APLIKASI BEBASIS FLUTTER

DENGAN TEMA KESISWAAN

OLEH KELOMPOK 5
dengan anggota kelompok:
-Dimas hari prasetyo (06) (ketua)
-Didan diandra (05)
-Lintang putri yulianti (17)
-Muhammad hamam nazrulloh (24)
-David tutan hamun (04)
 Asssalamualaikum warahmatullahi wabarakatu

Yang terhormat bapak Tri Frimansyah,

pada laporan ini kami dari kelompok 5 yang diketuai oleh Dimas hari
prasetyo akan membuat aplikasi yang berjalan dibawah framework
flutter dengan tema kesiswaan.

Nama aplikasi : KK8 (Kesiswaaan SMK 8)

Deskripsi aplikasi: aplikasi dengan tujuan untuk membantu guru untuk

mencatat point pelanggaran siswa. dengan cara kerja guru
menginputkan NIS, Nama, jenis pelanggaran, point. lalu ditampilkan
dalam bentuk tabel. semisal guru bingung

Source code: aplikasi ini menggunakan 4 file dart diantaranya: home,

kesiswaan, main dan dart dengan masing masing isi sebagai berikut.

File home.dart

import 'package:flutter/material.dart';
import 'kesiswaan.dart';
import 'point.dart';

class Welcome extends StatelessWidget {

const Welcome({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kesiswaan'),
),

body: Padding(
padding: const EdgeInsets.all(16.0),
child:
Table(
columnWidths: const {
0: FlexColumnWidth(2.0),
1: FlexColumnWidth(3.0),
},
children: [
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Tambahkan Pelanggaran'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SalesForm()),
);
},
child: Text('+'),
),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('List Point'),
 ),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => point()),
);
},
child: Text('Lihat'),
),
),
),
],
),
],
),
),
);
}
}

penjelasan dari source code di atas:

Kelas Welcome adalah sebuah StatelessWidget yang membangun

antarmuka pengguna dengan menggunakan Scaffold. Di dalamnya
terdapat AppBar dengan judul "Kesiswaan" dan body yang terdiri dari
Table yang memiliki dua baris dan dua kolom.

Setiap sel dalam tabel memiliki TableCell yang berisi teks dan sebuah
ElevatedButton. Dua tombol ini memiliki fungsionalitas onPressed yang
berbeda. Tombol pertama digunakan untuk menambahkan pelanggaran
dan mengarahkan pengguna ke layar SalesForm menggunakan
Navigator.push. Tombol kedua digunakan untuk melihat daftar poin dan
mengarahkan pengguna ke layar point menggunakan Navigator.push.
Seperti yang terlihat, tombol-tombol ini terhubung ke layar lain dalam
aplikasi menggunakan MaterialPageRoute, yang memungkinkan
navigasi antar layar.

Layar-layar lain yang dipanggil, seperti SalesForm dan point,

seharusnya merupakan bagian dari aplikasi Anda. SalesForm mungkin
digunakan untuk menambahkan pelanggaran, sedangkan point
digunakan untuk menampilkan daftar poin.

Anda mungkin perlu memeriksa bagian lain dari aplikasi, seperti

implementasi SalesForm dan point, serta pastikan bahwa rute navigasi
telah ditambahkan dengan benar dalam aplikasi Anda agar layar-layar
ini dapat diakses dan digunakan dengan baik.

File kesiswaan.dart

import 'package:flutter/material.dart';

class SalesForm extends StatefulWidget {

@override
_SalesFormState createState() => _SalesFormState();
}

class _SalesFormState extends State<SalesForm> {

final TextEditingController nisController = TextEditingController();
final TextEditingController namaSiswaController =
TextEditingController();
final TextEditingController kelasController = TextEditingController();
final TextEditingController jenisPelanggaranController =
TextEditingController();
final TextEditingController pointController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: nisController,
decoration: InputDecoration(labelText: 'NIS Siswa'),
),
SizedBox(height: 10),
TextField(
controller: namaSiswaController,
keyboardType: TextInputType.number,
decoration: InputDecoration(labelText: 'Nama Siswa'),
),
SizedBox(height: 10),
TextField(
controller: kelasController,
keyboardType: TextInputType.number,
decoration: InputDecoration(labelText: 'Kelas'),
),
TextField(
controller: jenisPelanggaranController,
keyboardType: TextInputType.number,
decoration: InputDecoration(labelText: 'Jenis Pelanggaran'),
),
SizedBox(height: 10),
TextField(
controller: pointController,
keyboardType: TextInputType.number,
decoration: InputDecoration(labelText: 'Point'),
),
SizedBox(height: 20),
ElevatedButton(
 onPressed: () {
_navigateToSummary(context);
},
child: Text('Input'),
),
],
),
),
);
}

void _navigateToSummary(BuildContext context) {

const String defaultKelas = 'N/A';

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudentSummary(
nis: int.tryParse(nisController.text) ?? 0,
nama: kelasController.text.isEmpty ? defaultKelas :
namaSiswaController.text,
kelas: namaSiswaController.text.isEmpty ? defaultKelas :
kelasController.text,
pelanggaran: jenisPelanggaranController.text.isEmpty ?
defaultKelas : jenisPelanggaranController.text,
point: int.tryParse(pointController.text) ?? 0,
),
),
);
}

class StudentSummary extends StatelessWidget {

final int nis; // Student ID
final String nama; // Student Name
final String kelas; // Class
final String pelanggaran; // Violation
final int point; // Points

StudentSummary({
required this.nis,
required this.nama,
required this.kelas,
required this.pelanggaran,
required this.point,
});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Rekap Siswa'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Table(
columnWidths: const {
0: FlexColumnWidth(2.0),
1: FlexColumnWidth(3.0),
},
border: TableBorder.all(),
children: [
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('NIS'),
),
),
 TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Nama'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Kelas'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Jenis Pelanggaran'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Point'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$nis'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
 child: Text('$nama'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$kelas'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$pelanggaran'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$point'),
),
),
],
),
],
),
),
);
}
}

’
Penjelasan dari source code diatas
SalesForm, adalah bentuk formulir yang memungkinkan pengguna
memasukkan informasi tentang siswa terkait pelanggaran yang
dilakukan. Formulir ini memiliki beberapa bidang teks untuk NIS siswa,
nama siswa, kelas, jenis pelanggaran, dan poin.
Setelah pengguna mengisi formulir dan menekan tombol "Input", aplikasi
akan memindahkan pengguna ke layar kedua, yaitu StudentSummary.
Di sini, informasi yang dimasukkan sebelumnya ditampilkan dalam
bentuk tabel yang menampilkan detail siswa terkait NIS, nama, kelas,
jenis pelanggaran, dan poin yang telah dimasukkan.

Terdapat beberapa pemeriksaan saat menampilkan informasi. Jika

bidang nama siswa atau kelas kosong, nilai default "N/A" akan
ditampilkan. Jika bidang numerik seperti NIS atau poin tidak berisi
angka, nilai default 0 akan ditampilkan.

Aplikasi ini berfungsi sebagai cara untuk mengumpulkan informasi siswa

terkait pelanggaran yang dilakukan dan menampilkan informasi tersebut
dalam bentuk tabel rekapitulasi.

File point.dart

import 'package:flutter/material.dart';

class point extends StatelessWidget {

const point({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor:
Colors.deepPurple),
useMaterial3: true,
),
home: const pointPage(title: 'Point'),
);
}
}
class pointPage extends StatefulWidget {
const pointPage({super.key, required this.title});
final String title;
@override
State<pointPage> createState() => pointPageState();
}

class pointPageState extends State<pointPage> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("List Point")),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Table(
columnWidths: const {
0: FlexColumnWidth(2.0),
1: FlexColumnWidth(3.0),
},
border: TableBorder.all(),
children: [
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Jenis Pelanggaran'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Point'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Terlambat'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('5'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Tidak mengumpulkan tugas'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('5'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Bolos'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('10'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Merusak Fasilitas'),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('40'),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Keluar sekolah tidak ijin'),
),
 ),
TableCell(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('70'),
),
),
],
),
],
),
),
),
);
}
}
penejelasan dari source code diatas

Program yang diberikan adalah aplikasi Flutter sederhana yang

menampilkan daftar pelanggaran beserta poinnya dalam bentuk tabel.
Mari saya jelaskan strukturnya:

1. Terdapat dua kelas utama: point dan pointPage.

2. Kelas point adalah StatelessWidget yang menjadi root dari
aplikasi. Di dalamnya, terdapat konfigurasi dasar aplikasi
menggunakan MaterialApp. Pada konfigurasi ini, tema aplikasi
ditentukan menggunakan ThemeData. Dalam kasus ini, tema
memiliki colorScheme yang dihasilkan dari warna seed (perintis)
menggunakan warna Colors.deepPurple. useMaterial3
diatur menjadi true, menandakan penggunaan fitur-fitur
eksperimental terkini dalam Flutter.
3. Kelas pointPage adalah StatefulWidget yang digunakan untuk
menampilkan halaman utama aplikasi. Di dalamnya, terdapat
Scaffold yang menampilkan AppBar dengan judul "List Point"
dan tubuh halaman berisi Table yang menampilkan daftar
pelanggaran dan poinnya.
 4. Pada Table, terdapat beberapa TableRow yang masing-masing
berisi TableCell. Setiap TableCell berisi teks yang mewakili
jenis pelanggaran dan poin yang terkait dengan pelanggaran
tersebut.
5. Setiap TableRow memiliki dua TableCell, satu untuk jenis
pelanggaran dan yang lainnya untuk jumlah poin terkait.
6. Setiap teks pelanggaran dan poinnya diberi jarak padding
menggunakan Padding widget dengan EdgeInsets.all(8.0)
untuk memberikan ruang putih di sekitarnya agar lebih terlihat
terpisah dan rapi.

File main.dart

import 'kesiswaan.dart';
import 'home.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Welcome(),
);
}
}

penejelasan dari source code diatas

Program yang Anda berikan adalah aplikasi Flutter sederhana yang

menggunakan beberapa file Dart. Ini adalah aplikasi Flutter dasar
dengan dua file lain yang diimpor ke dalam file utama:
 1. File 'kesiswaan.dart': Ini adalah file yang tidak disertakan dalam
kode yang Anda berikan, tetapi kemungkinan berisi kelas-kelas
atau fungsi-fungsi terkait manajemen data atau fitur terkait data
siswa.
2. File 'home.dart': Sama seperti 'kesiswaan.dart', file ini tidak
diberikan dalam kode yang Anda bagikan. Mungkin berisi widget
atau tata letak untuk halaman beranda aplikasi.

Sekarang, dalam file utama 'main.dart' yang Anda berikan:

● Fungsi main() adalah titik masuk aplikasi. Di sini, dia

menetapkan runApp() dengan instance dari MyApp, yang pada
gilirannya membangun dan menampilkan widget MaterialApp.
● Kelas MyApp adalah widget Flutter yang didasarkan pada
StatelessWidget. StatelessWidget adalah widget yang tidak
memiliki state internal yang dapat berubah. Dalam method
build(), MaterialApp didefinisikan sebagai root widget dengan
properti home yang menunjuk ke Welcome().
● MaterialApp adalah kelas yang menyediakan struktur dasar untuk
aplikasi Flutter, termasuk navigasi, tema, dan banyak fitur lainnya.
Di sini, properti 'home' dari MaterialApp menunjuk ke Welcome().
● 'Welcome()' mungkin adalah widget atau tampilan yang
menampilkan layar selamat datang atau halaman pertama aplikasi
Anda.

Kode ini adalah kerangka dasar aplikasi Flutter yang menggunakan

MaterialApp sebagai struktur dasar dan tampaknya merujuk pada file-file
terkait 'kesiswaan.dart' dan 'home.dart' yang mungkin berisi logika
aplikasi atau widget-widget yang digunakan dalam aplikasi tersebut.