Web - Proyek PPDB SMK Online

 Spesifikasi Perangkat Lunak

PPT Spesifikasi

DOC Detail Spesifikasi

Arsitektur Aplikasi

Detail Arsitektur 

PPT-Arsitektur Aplikasi

PPT-Desain UI/UX

Desain UI

FRONT End

Desain UI/UX

https://docs.google.com/document/d/1LE_W_B_y5tllQy6KQMtSx9wWNEsjtL3b/edit?usp=drive_link&ouid=112365073285716859334&rtpof=true&sd=true

Wireframe

High fidelity design

Prototype

FullStacks Development

https://docs.google.com/document/d/1AOfUy2eFqLhFW8hAToabuwNNp4Scv7SO/edit?usp=drive_link&rtpof=true&sd=true

Panduan Implementasi

https://docs.google.com/document/d/1UUGyhNjVEgZlqmzSU0Kj_UCI_CeeNTl4/edit?usp=drive_link&ouid=112365073285716859334&rtpof=true&sd=true

Materi Teknologi Web PHP MySQL

https://docs.google.com/document/d/1aiHPxsFc5RTKJB_4XF4MslpkqiycW8tM/edit?usp=drive_link&ouid=112365073285716859334&rtpof=true&sd=true

BACK END

Membuat back-end aplikasi web adalah proses membangun komponen sisi server (server-side) yang mengelola logika bisnis, database, dan integrasi API agar aplikasi dapat berjalan. Berikut adalah tahapan sistematis pembuatan back-end dari spesifikasi hingga implementasi: [1, 2]

1. Analisis Spesifikasi & Perencanaan (Requirement Analysis) [1]

Tahap awal adalah memahami apa yang harus dibangun. [1]

• Identifikasi Fitur: Menentukan fungsi utama aplikasi (misal: login/register, unggah data, sistem transaksi).
• Analisis Kebutuhan Fungsional: Apa yang dilakukan sistem (proses data) dan non-fungsional (kecepatan, keamanan).
• Penyusunan API Dokumentasi: Membuat draf endpoints API yang dibutuhkan (misal: POST /api/login). [1, 2, 3, 4]

2. Desain Arsitektur Sistem (System Design) [1]

Merancang struktur teknis agar aplikasi mudah dikembangkan dan dirawat. [1]

• Pemilihan Technology Stack: Memilih bahasa (Node.js, Python, PHP, Go) dan framework (Express, Django, Laravel, Gin) yang sesuai.
• Desain Basis Data (Database): Menentukan jenis database (Relasional seperti PostgreSQL/MySQL atau NoSQL seperti MongoDB) dan merancang skema data.
• Pemilihan Arsitektur: Memutuskan penggunaan Monolithic (untuk tim kecil/awal) atau Microservices (untuk aplikasi besar). [1, 2, 3]

3. Pengembangan Back-end (Coding & Development)

Tahap penulisan kode sumber berdasarkan desain. [1, 2]

• Inisialisasi Proyek: Membuat folder, menginstal dependensi (library), dan mengatur environment (misal: menggunakan Git/GitHub).
• Implementasi Database: Menulis kode untuk koneksi database (ORM/ODM).
• Pembuatan API & Logika Bisnis: Mengembangkan routes, controllers, dan middleware untuk mengolah data dan aturan bisnis.
• Autentikasi & Otorisasi: Mengimplementasikan sistem keamanan (JWT, OAuth) untuk membatasi akses pengguna. [1, 2, 3, 4, 5]

4. Pengujian Back-end (QA & Testing)

Memastikan kode berjalan sesuai spesifikasi dan bebas dari bug. [1, 2, 3]

• Unit Testing: Menguji komponen terkecil (fungsi/method) secara terpisah.
• Integration Testing: Menguji interaksi antara komponen, seperti koneksi API ke database.
• API Testing: Menggunakan alat seperti Postman untuk mengecek request dan response API. [1, 2, 3]

5. Deployment & Integrasi (Deployment)

Memindahkan aplikasi dari komputer lokal ke server produksi. [1]

• Penyusunan Server: Menyiapkan server cloud (AWS, GCP, Azure, DigitalOcean).
• Containerization (Docker): Membungkus aplikasi ke dalam container agar konsisten di semua lingkungan.
• CI/CD Pipeline: Mengotomatisasi proses pengujian dan penyebaran (Continuous Integration/Continuous Deployment) agar setiap perubahan kode langsung diuji dan di-deploy. [1, 2, 3, 4, 5]

6. Pemeliharaan & Pemantauan (Maintenance & Monitoring)

Memastikan aplikasi tetap berjalan optimal pasca-peluncuran. [1, 2]

• Monitoring: Menggunakan alat seperti Prometheus atau Datadog untuk memantau performa, error, dan penggunaan sumber daya.
• Logging: Menyimpan catatan aktivitas server untuk melacak masalah.
• Pembaruan Fitur: Menambahkan fitur baru atau melakukan refactoring kode berdasarkan kebutuhan pengguna. [1, 2, 3, 4, 5]

---

Ringkasan Teknologi Utama:

• Bahasa/Framework: JavaScript/Node.js/Express, Python/Django/FastAPI, Go/Gin, PHP/Laravel, Java/Spring Boot.
• Database: MySQL, PostgreSQL, MongoDB, Redis (Caching).
• Alat: Git, Docker, Kubernetes, Postman, Linux

https://www.codepolitan.com/blog/backend-developer-panduan-langkah-pengembang-backend-modern-di-tahun-2026/

Android - Task Manager

 

Untuk membangun aplikasi Simple Task Manager menggunakan Jetpack Compose. Struktur ini mengikuti standar profesional dengan memisahkan data, komponen, dan layar utama.

---

1. Struktur File Proyek

Buatlah folder (package) di dalam com.example.taskapps sehingga strukturnya menjadi seperti ini:

• data/

  • Task.kt (Model data)

• ui/components/

  • TaskItem.kt (Komponen kartu tugas)

• ui/screens/

  • TaskListScreen.kt (Tampilan utama daftar tugas)

• MainActivity.kt (Titik masuk aplikasi)

---

2. Implementasi Kode

A. Model Data (data/Task.kt)

Kotlin

package com.example.taskapps.data

data class Task(
    val id: Int,
    val title: String,
    val description: String
)

B. Komponen UI (ui/components/TaskItem.kt)

Kotlin

package com.example.taskapps.ui.components

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.taskapps.data.Task

@Composable
fun TaskItem(task: Task) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp, horizontal = 8.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = task.title, style = MaterialTheme.typography.titleMedium)
            Text(text = task.description, style = MaterialTheme.typography.bodySmall)
        }
    }
}

C. Layar Utama (ui/screens/TaskListScreen.kt)

Kotlin

package com.example.taskapps.ui.screens

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.example.taskapps.data.Task
import com.example.taskapps.ui.components.TaskItem

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TaskListScreen() {
    // Data dummy untuk ditampilkan
    val tasks = listOf(
        Task(1, "Install Android Studio", "Versi Ladybug 2024"),
        Task(2, "Belajar Kotlin", "Memahami data class dan fungsi"),
        Task(3, "Implementasi Compose", "Membuat UI deklaratif")
    )

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Task Manager") })
        }
    ) { paddingValues ->
        LazyColumn(modifier = Modifier.padding(paddingValues)) {
            items(tasks) { task ->
                TaskItem(task = task)
            }
        }
    }
}

D. Titik Masuk Utama (MainActivity.kt)

Kotlin

package com.example.taskapps

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.taskapps.ui.screens.TaskListScreen
import com.example.taskapps.ui.theme.TaskAppsTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Membungkus aplikasi dengan tema bawaan
            TaskAppsTheme { 
                TaskListScreen() 
            }
        }
    }
}

---

3. Ringkasan Langkah Menjalankan (Running)

1. Sync Gradle: Klik ikon gajah di pojok kanan atas untuk memastikan semua dependencies terunduh.

2. Pilih Device: Hubungkan HP Android (USB Debugging aktif) atau pilih Emulator di toolbar atas.

3. Klik Run (▶️): Tunggu proses Gradle Build selesai.

4. Verifikasi: Aplikasi akan terinstal otomatis di perangkat dan menampilkan daftar tugas yang sudah kita buat di data dummy.

---

Tips Pengembangan Selanjutnya:

• State Management: Gunakan remember { mutableStateListOf(...) } jika ingin daftar tugas bisa ditambah atau dihapus oleh pengguna secara real-time.

• Navigation: Tambahkan Jetpack Navigation jika ingin berpindah ke halaman "Detail Tugas" saat sebuah item di-klik.

      
Menuliskan Kode

---

Cara Membuatnya di Android Studio

1. Buka panel "Project" di sebelah kiri.

2. Cari folder java (atau kotlin+java) > com.example.taskapps.

3. Membuat Folder data:

   • Klik kanan pada com.example.taskapps.

   • Pilih New > Package.

   • Ketik data lalu tekan Enter.

4. Membuat Folder ui dan sub-folder:

   • Klik kanan pada com.example.taskapps.

   • Pilih New > Package.

   • Ketik ui.components (ini akan otomatis membuat folder ui dan folder components di dalamnya).

   • Ulangi lagi: Klik kanan pada com.example.taskapps, pilih New > Package, ketik ui.screens.

---

Cara Mengisi File ke Dalam Folder

Setelah folder siap, sekarang buat file kodenya:

Lokasi Folder	Cara Buat File	Nama File
data	Klik kanan folder > New > Kotlin Class/File	Task (Pilih Class)
ui.components	Klik kanan folder > New > Kotlin Class/File	TaskItem (Pilih File)
ui.screens	Klik kanan folder > New > Kotlin Class/File	TaskListScreen (Pilih File)

---

Tips Penting saat Copy-Paste Kode:

Pastikan baris paling atas di setiap file (package ...) sesuai dengan lokasinya.

• Di file Task.kt, baris pertamanya harus:

  package com.example.taskapps.data

• Di file TaskItem.kt, baris pertamanya harus:

  package com.example.taskapps.ui.components

• Di file TaskListScreen.kt, baris pertamanya harus:

  package com.example.taskapps.ui.screens

Jika ada tanda lampu merah (error) setelah Anda membuat folder ini, biasanya itu karena masalah import. Cukup arahkan kursor ke kode yang merah, lalu tekan Alt + Enter untuk memperbaikinya secara otomatis.