Tugas PPB 1

 Nama:    Dilla Wahdana

NRP:       5025211060

Kelas:      PPB-B

Classroom App

Deskripsi Singkat

    Kuliah E-Learning atau pembelajaran dalam jejaring yang disingkat daring adalah pembelajaran yang memanfaatkan sistem manajemen pembelajaran internet yang dapat diakses oleh peserta didik kapan saja dan dimana saja. 

    Di Institut Teknologi Sepuluh Nopember, telah dibangun platform myITS Classroom untuk memfasilitasi dosen dalam melakukan manajemen pembelajaran terhadap kuliah yang diampunya masing-masing. Saat ini, semua mahasiswa dan dosen telah ditambahkan dan didaftarkan ke kelasnya masing-masing sesuai dengan SIM Akademik ITS. Sehingga, tidak perlu menambahkan peserta atau membuat kelas secara manual, baik di semester berjalan maupun semester ke depannya. 

    Pembelajaran daring atau e-learning mempunyai dua metode, yaitu sinkron dan asinkron. Pembelajaran sinkron adalah pembelajaran interaktif dalam waktu secara bersamaan antara pendidik dan peserta didik melalui media elektronik. Sementara, pembelajaran asinkron adalah pembelajaran interaktif dalam waktu secara tunda antara pendidik dan peserta didik melalui media elektronik. 

    Dalam implementasinya, pembelajaran sinkron dapat dilakukan menggunakan layanan Zoom teleconference di aplikasi myITS Classroom. Sementara untuk pembelajaran asinkron, dosen dapat memberikan tautan atau menggunggah video/audio (misal, youtube, dan lain-lain), kemudian menambahkan dengan materi belajar pribadi (misal, PDF dari slides, handouts, dan lain-lain), dan melengkapinya dengan tugas.

Fitur Aplikasi:

1. Menampilkan list Assignment berdasarkan waktu deadline pegumpulan
2. Menampilkan matakuliah apa saja yang diambil oleh mahasiswa
3. Menampilkan waktu kelas dilaksanakan serta nama dosen pengampu matakuliah tersebut.
4. Fitur comment yang bisa digunakan untuk pengumpulan tugas dari matakuliah yang diambil.

Design:

Design dibuat menggunakan aplikasi figma. Berikut merupakan linknya:

Design in Figma

• Sign In/Sign Up page. Sebelum masuk ke aplikasi, pengguna yang sudah mempunyai akun di aplikasi classroom bisa melakukan Log In untuk masuk ke aplikasinya. Sedangkan pengguna yang belum pernah memakai aplikasi ini bisa registrasi terlebih dahulu untuk pembuatan akun user.
  
  
  
  
  
• Home Page. Pengguna dapat melihat list matakuliah apa saja yang akan datang dan beberapa assigment yang harus dikerjakan mahasiswa sesuai deadline yang sudah ditentukan.
  
  
  
  
  
• My Task Page. Pengguna dapat melihat list penugasan yang dimiliki sesuai dengan matakuliah yang diambil. Tampilan list penugasan di filter berdasarkan deadline pengumpulan yang paling awal. Pengguna dapat melihat informasi tugas apa yang harus dikerjakan dan bisa disubmit pada fitur comment.
  
  
  
  
  
• Classes Page. Pengguna dapat melihat kelas apa saja yang dimiliki beserta penjelasan matakuliahnya. Disitu juga terdapat informasi siapa nama dosen pengampu matakuliah, waktu pelaksanaan kelas, dan juga informasi ruang kelas yang digunakan untuk pembelajaran matakuliah tersebut. Selain itu terdapat fitur notifikasi yang digunakan sebagai pengingat bahwa akan ada kelas diwaktu dekat ini.
  
  
  
  
  

Demo Quiz 2

 Kelompok:

1. Dilla Wahdana                5025211060

2. Nadya Zuhria Amana      5025211058

3. Daud Dhiya' Rozaan       5025211021

Demo Quiz 2 Aplikasi Lembaga Bimbingan Belajar

    Aktual Cendekia Course adalah aplikasi pembelajaran online yang menyediakan berbagai kursus yang relevan dengan kebutuhan para siswa/mahasiswa. Aplikasi ini dirancang untuk memberikan pengalaman belajar yang interaktif dan menyenangkan, serta dapat diakses kapan saja dan di mana saja.

Aplikasi Aktual Cendekia Course dibangun menggunakan bahasa pemrograman PHP sebagai bahasa utama. PHP digunakan untuk membangun struktur aplikasi, menangani database, dan memproses logika bisnis. Untuk gaya bahasa, aplikasi ini menggunakan CSS untuk mengatur tampilan dan tata letak aplikasi. CSS digunakan untuk membuat aplikasi terlihat menarik dan mudah digunakan. Selain itu, aplikasi ini juga menggunakan sedikit JavaScript untuk menambahkan interaktivitas dan fitur-fitur tertentu. JavaScript digunakan untuk membuat aplikasi lebih responsif dan responsif.

    Aplikasi Aktual Cendekia Course menawarkan berbagai kursus yang mencakup berbagai bidang, mulai dari mata pelajaran umum seperti matematika, biologi, dll, ada juga materi seputar teknologi, bisnis, hingga keterampilan umum. Kursus-kursus tersebut dirancang oleh para ahli di bidangnya dan disajikan dengan cara yang mudah dipahami. Aplikasi ini juga dilengkapi dengan berbagai fitur yang dapat membantu pengguna untuk belajar lebih efektif, seperti:

1. Video tutorial yang berkualitas tinggi
2. Materi pembelajaran yang lengkap dan komprehensif
3. Latihan soal untuk mengukur pemahaman peserta

Aktual Cendekia Course merupakan pilihan yang tepat bagi siapa saja yang ingin belajar secara online dengan pengalaman yang berkualitas. Aplikasi ini dapat membantu pengguna dalam memahami materi belajar dan mengembangkan keterampilan dan pengetahuannya, serta mempersiapkan diri untuk menghadapi tantangan di dunia kerja.

Berikut adalah beberapa kelebihan aplikasi Aktual Cendekia Course:

1. Kursus yang relevan dengan kebutuhan industri dan masyarakat
2. Pengalaman belajar yang interaktif dan menyenangkan
3. Dapat diakses kapan saja dan di mana saja
4. Kursus yang dirancang oleh para ahli di bidangnya
5. Fitur-fitur yang dapat membantu pengguna untuk belajar lebih efektif

Link Github: Github/AktualCendekiaCourse

Link Youtube: Youtube/DemoQuiz2

Final Project PBKK A

Nama : Dilla Wahdana

NRP : 5025211060

Kelas : PBKK A

Final Project PBKK A

Sistem absensi pegawai adalah salah satu sistem penting dalam suatu perusahaan. Sistem ini digunakan untuk mencatat kehadiran dan ketidakhadiran pegawai. Dengan sistem absensi, perusahaan dapat memantau kinerja pegawai dan memastikan bahwa pegawai hadir sesuai dengan jadwal kerja.

Dalam studi kasus ini, kita akan membahas website absensi pegawai suatu perusahaan. Website ini akan menggunakan arsitektur MVC:

Diagram MVC

View: Berisi tampilan untuk pengguna.

Controller: Bertanggung jawab untuk menerima input dari pengguna dan memprosesnya.

Dalam konteks website absensi (masuk/pulang) pegawai, model akan berisi data-data absensi pegawai, seperti:

1. ID pegawai
2. Nama pegawai
3. Password
4. Jabatan pegawai
5. Tanggal Masuk
6. Tanggal Pulang
7. Lokasi Absen
8. Status absensi

View akan menampilkan data absensi pegawai kepada pengguna. View juga akan menerima input dari pengguna, seperti tombol untuk melakukan absensi.

Controller akan menerima input dari pengguna dan memprosesnya. Controller juga akan berkomunikasi dengan model untuk mengakses data absensi pegawai.

Berikut adalah gambaran umum bagaimana website absensi pegawai akan bekerja:

1. Pegawai akan membuka website absensi.
2. Pegawai akan memasukkan ID pegawai , password, absensi (masuk/pulang), status absensi dan keterangan kegiatan (diisi etika absen pulang).
3. Pegawai akan mengklik tombol untuk melakukan absensi.
4. Controller akan menerima input dari pegawai.
5. Controller akan berkomunikasi dengan model untuk menyimpan data absensi pegawai.
6. Controller akan menampilkan hasil absensi pegawai ke pengguna.

Tampilan project web absensi pegawai:

1. ui website

2. tampilan rekap absensi

3. Database spreadsheet

metode absensi:
a. absen masuk tidak boleh lebih dari sekai dalam sehari.
b. absen pulang bisa diulang berkali-kali
jika salah absen pulang pada waktu berangkat, maka masih bisa absen pulang lagi di sore hari.
c. bisa absen pulang tanpa absen masuk
ini untuk karyawan yang lupa absen masuk, maka masih bisa absen pulang (dihitung potongan tidak absen)

Kelompok 15:

1. Mashita Dewi (5025211036)
2. Nadya Zuhria A (5025211058)
3. Dilla Wahdana (5025211060)

Link Github: https://github.com/dilwdn/WebAbsensi_FP.git

Jurnal Referensi: 

Link Demo: 

Quiz 2 - Final Project

 Nama    : Dilla Wahdana

NRP        : 5025211060

Kelas        : Pweb A

Lembaga Bimbingan Belajar

1. Spesifikasi kebutuhan perangkat lunak dan struktur menu yang cocok untuk aplikasi lembaga bimbingan belajar

Spesifikasi kebutuhan perangkat lunak:

1. Manajemen Pengguna:
   a. Pendaftaran student dan admin (mentor)
   b. Otentikasi dan otorisasi yang aman.
   c. Profil pengguna dengan informasi profesi, email, dan foto
2. Manajemen Materi Pembelajaran:
   a. Penambahan, pengeditan, dan penghapusan materi pembelajaran.
   b. Struktur berbasis modul atau kelas.
   c. Kemampuan untuk mengunggah file, tautan, atau multimedia.
3. Jadwal dan Penjadwalan:
   a. Penjadwalan kelas dan sesi bimbingan.
   b. Pemberitahuan otomatis untuk mengingatkan siswa dan guru tentang jadwal mereka.
   c. Integrasi kalender.
4. Interaksi Siswa-Guru:
   a. Forum atau fitur diskusi.
   b. Obrolan langsung atau pesan antara siswa dan guru.
   c. Pengumuman dan pembaruan dari guru kepada siswa.
5. Pelacakan Kemajuan Siswa:
   a. Catatan prestasi dan nilai.
b. Analisis kemajuan siswa secara individu.
c. Pemberitahuan kepada orangtua atau wali tentang perkembangan siswa.

Struktur Menu:

1. Beranda:
   a. Informasi umum tentang lembaga.
   b. Pemberitahuan dan pengumuman penting.
   c. Profil Pengguna:Pengaturan profil pribadi.
   d. Riwayat pembelajaran dan pencapaian.
2. Kelas dan Materi:
   a. Akses ke modul atau kelas yang diikuti.
   b. Materi pembelajaran dan tugas.
3. Jadwal:
   a. Jadwal kelas dan sesi bimbingan.
   b. Pemberitahuan dan pengingat.
4. Diskusi dan Interaksi:
   a. Forum atau ruang diskusi.
   b. Pesan langsung dengan guru dan siswa.

2. Buatlah desain database dan struktur tabel yang akan menampung data yang dikelola.

            CDM

        PDM

3. Desain Front End dan page yang akan dibuat untuk aplikasi

Admin

User (Student)

4. Sebutkan daftar action untuk backend yang akan dibutuhkan. Jelaskan digunakan apa saja.

1. Autentikasi dan Otorisasi:
   - Register: Memproses pendaftaran pengguna baru.
   - Login: Memproses autentikasi pengguna yang sudah terdaftar.
   - Logout: Keluar dari sesi pengguna.
   - Otorisasi: Memastikan hak akses yang sesuai untuk setiap pengguna.
2. Manajemen Pengguna:
   - Kelola Profil: Mengelola informasi pribadi dan foto profil pengguna.
   - Atur Peran: Menetapkan peran dan hak akses berdasarkan tipe pengguna (siswa, guru, staf, dll.).
   - Reset Password: Memungkinkan pengguna mereset kata sandi mereka.
3. Manajemen Materi Pembelajaran:
   - Tambah Materi: Mengelola penambahan modul atau kelas pembelajaran.
   - Edit Materi: Memungkinkan perubahan pada materi pembelajaran.
   - Hapus Materi: Menghapus modul atau kelas yang tidak diperlukan lagi.
   - Unggah File: Mendukung pengunggahan materi, tautan, atau multimedia.
4. Jadwal dan Penjadwalan:
   - Buat Jadwal: Menjadwalkan kelas dan sesi bimbingan.
   - Edit Jadwal: Memungkinkan perubahan pada jadwal yang sudah ada.
   - Hapus Jadwal: Menghapus jadwal kelas atau sesi tertentu.
5. Interaksi Siswa-Guru:
   - Forum/Diskusi: Mendukung komunikasi antara siswa dan guru melalui forum atau ruang diskusi.
   - Pesan Langsung: Mengelola pesan langsung antara siswa dan guru.
   - Pemberitahuan: Mengelola pemberitahuan dan pengumuman.
6. Pelacakan Kemajuan Siswa:
   - Catatan Prestasi: Merekam dan menyimpan catatan prestasi siswa.
   - Nilai: Menyimpan dan mengelola hasil ujian dan tugas.
   - Laporan Kemajuan: Membuat laporan kemajuan siswa.
7. Integrasi dengan Media Sosial:
   - Bagikan Prestasi: Menyediakan opsi untuk berbagi prestasi siswa di platform media sosial.
   - Integrasi Sosial: Mengelola integrasi dengan platform media sosial.
8. Pemeliharaan dan Dukungan:
   - Pembaruan Perangkat Lunak: Menangani pembaruan perangkat lunak secara berkala.
   - Dukungan Teknis: Memberikan dukungan teknis dan solusi masalah.

Membuat aplikasi Appsheet

 Nama    : Dilla Wahdana

NRP    : 5025211060

Kelas    : PBKK A

Membuat aplikasi Appsheet

    Pada pertemuan ke 15 ini, kita akan belajar tentang Google Apps Script. Google Apps Script adalah platform pengembangan aplikasi cepat yang mempercepat dan mempermudah pembuatan aplikasi bisnis yang terintegrasi denganGoogle Workspace. Kalian dapat menulis kode dalam JavaScript modern dan memiliki akses ke library bawaan untuk aplikasi favorit Google Workspace seperti Gmail, Kalender, Drive, dan lainnya. Tidak ada yang perlu diinstal. Google Apps Script menyediakan editor kode langsung di browser kalian, dan skrip kalian berjalan di server Google.

Nah untuk penugasan pada materi kali ini yaitu membuat aplikasi Appsheet yang mana form data yang kita buat diintegrasikan ke google sheet. Berikut penjelasan programnya:

1. Buat project pada VSCode atau editor source code lainnya. Lalu buat file untuk html nya yang erisi apa saja yang data yang ingin di input. berikut scriptnya

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href="Google_Sheet.css">

</head>

<body>

    <div class="container">

        <form method="post" action="" name="contact-form">

            <h4>Contact Us</h4>

            <input type="text" name="your-name" placeholder="Name">

            <input type="text" name="your-number" placeholder="Number">

            <input type="email" name="your-email" placeholder="Email">

            <textarea name="message" rows="7" placeholder="Your Message"></textarea>

            <input type="submit" value="Submit" id="submit">

        </form>

    </div>

    <script src="Google_Sheet.js"></script>

</body>

</html>

lalu akan menampilkan halaman html seperti berikut:

2. Buat file CSS nya untuk memperindah tampilan htmlnya. Berikut scriptnya:

*{

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    font-family: 'poppins', sans-serif;

    font-size: 18px;

}

body{

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}

.container{

    width: 500px;

    padding: 30px;

    border: 1px solid #eeeeee;

    border-radius: 10px;

    background-color: #003b5b;

}

h4{

    margin-bottom: 10px;

    font-size: 24px;

    color: white;

}

input{

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

}

textarea{

    width: 100%;

    padding: 10px;

}

#submit{

    border: none;

    background-color: orangered;

    color: white;

    width: 200px;

    margin-top: 10px;

    border-radius: 5px;

}

#submit:hover{

    background-color: #333333;

}

Sehingga tampilannya seperti berikut:

3. Selanjutnya buka google sheet, buat sheet baru kemudian klik 'ekstensi' pilih Apps Script. Buat kode untuk mengintegrasi data dari form html ke google sheet yang sudah dibuat tadi. dengan script sebagai berikut:

const sheetName = 'form data'

const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {

  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()

  scriptProp.setProperty('key', activeSpreadsheet.getId())

}

function doPost (e) {

  const lock = LockService.getScriptLock()

  lock.tryLock(10000)

  try {

    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))

    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]

    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {

      return header === 'Date' ? new Date() : e.parameter[header]

    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService

      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))

      .setMimeType(ContentService.MimeType.JSON)

  }

  catch (e) {

    return ContentService

      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))

      .setMimeType(ContentService.MimeType.JSON)

  }

  finally {

    lock.releaseLock()

  }

}

lalu jalankan code pada Apps Scriptnya. setelah success klik deploy dan setting untuk web application. nanti akan muncul link yang akan kita gunakan untuk mengintegrasikan web kita ke google sheetnya.

4. Masukkan link yang muncul pada Apps Script nya ke file html pada bagian 'action'. Setelah itu jalankan webnya dan coba isi formnya. 

Jika berhasil akan muncul script berikut:

Dan data yang kita masukkan akan masuk/tersimpan di google sheet seperti gambar berikut:

5. Dan yang terakhir kita buat file javascript untuk membuat tampilan data success lebih bagus dan menarik. akan mumcul pop-up notifikasi ketika kita berhasil memasukkan datanya.

Link Github: https://github.com/dilwdn/Appsheet_pweb.git

Referensi: https://www.youtube.com/AppSheet

CodeIgniter MVC Toko Online

 Nama    : Dilla Wahdana

NRP        : 5025211060

Kelas      : PBKK A

Aplikasi Toko Online

Pada pertemuan kali ini mempelajari bagaimana membuat aplikasi toko online dengan memanfaatkan CodeIgniter yang telah dibahas pada pertemuan sebelumnya. Dalam pembuatan website seperti toko online, CRUD (Create, Read, Update dan Delete) merupakan dasar dalam membuat website dinamis. Dimana pengguna ataupun admin dapat menambah, menampilkan, mengubah dan menghapus data yang ada di dalam website tersebut.

Komponen Toko Online

• Membuat Halaman Utama Toko Online
• Register dan Login Member
• Order Member
• Logout Session
• Halaman Admin - Produk
• Halaman Admin - Invoice

1. buat database toko online

2. buat model untuk aplikasinya

3. buat tampilan layar yang diinginkan pada folder view

4. configurasi routesi

5. hasil testing

Link Github: https://github.com/dilwdn/TokoOnline_CI4.git

QUIZ 2 PBKK

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas     : PBKK A

QUIZ 2

1. Buatlah deskripsi aplikasi dan ruang lingkup fitur yang akan dikerjakan

Ruang lingkup aplikasi ini akan mencakup:

Deskripsi Aplikasi:

Nama Aplikasi: CinemaX

Tujuan Utama: Memberikan kemudahan bagi pengunjung bioskop untuk memesan tiket secara cepat dan efisien tanpa harus antri di lokasi bioskop.

Platform: Aplikasi akan tersedia baik dalam versi mobile (iOS dan Android) maupun versi web.

Ruang Lingkup Fitur:

1. Pemesanan Tiket:

   - Pengguna dapat memilih film yang ingin ditonton dari daftar film yang sedang tayang.

   - Memilih jadwal pemutaran yang tersedia untuk film tersebut.

   - Pemilihan tempat duduk di dalam bioskop dengan visualisasi auditorium yang interaktif.

   - Proses pembayaran tiket secara online melalui berbagai metode pembayaran yang aman.

2. Jadwal Film:

   - Menampilkan daftar lengkap film yang sedang tayang beserta jadwal pemutaran di berbagai bioskop mitra.

3. Pilihan Tempat Duduk:

   - Memberikan kemampuan kepada pengguna untuk memilih tempat duduk yang diinginkan di dalam auditorium bioskop.

4. Pembayaran Mudah:

   - Menyediakan berbagai metode pembayaran yang aman dan nyaman seperti kartu kredit, transfer bank, dompet digital, atau sistem pembayaran online lainnya.

5. Konfirmasi Pemesanan:

   - Mengirimkan konfirmasi pemesanan tiket secara elektronik kepada pengguna setelah proses pembayaran berhasil dilakukan.

6. Notifikasi:

   - Memberikan notifikasi kepada pengguna tentang jadwal film yang telah dipesan, pengingat waktu tayang, dan informasi penting terkait transaksi mereka.

7. Reward dan Promo:

   - Memberikan promo, diskon, atau reward khusus kepada pengguna untuk setiap transaksi yang dilakukan.

8. Ulasan dan Penilaian:

   - Memungkinkan pengguna untuk memberikan ulasan atau penilaian terhadap film yang mereka tonton serta pengalaman menggunakan aplikasi.

9. Histori Transaksi:

   - Menyediakan riwayat transaksi sehingga pengguna dapat melihat daftar film yang telah mereka pesan sebelumnya.

10. Lokasi dan Informasi Bioskop:

    - Memberikan informasi lengkap tentang lokasi bioskop, daftar film yang sedang tayang, dan fasilitas yang tersedia di setiap bioskop mitra.

Ruang Lingkup Pengembangan:

- Pengembangan antarmuka pengguna yang responsif dan intuitif (UI/UX).

- Pembangunan sistem backend yang mengelola data film, jadwal, ketersediaan tempat duduk, dan transaksi.

- Integrasi dengan sistem pembayaran untuk menangani proses pembayaran secara aman.

- Implementasi sistem notifikasi untuk konfirmasi pemesanan dan pengingat kepada pengguna.

- Pengembangan fitur pengelolaan promo, diskon, dan reward untuk pengguna.

- Pengembangan sistem untuk ulasan pengguna dan histori transaksi.

- Integrasi dengan sistem bioskop mitra untuk akses data jadwal film dan informasi bioskop.

Ruang lingkup ini akan melibatkan pengembangan frontend (UI/UX), backend (logika aplikasi, basis data, dan integrasi sistem), serta pengujian menyeluruh untuk memastikan aplikasi berfungsi secara optimal sebelum diluncurkan ke pengguna.

2. Desain User Interface untuk aplikasi

3. Implementasikan aplikasi dengan menggunakan framework CI

    https://github.com/quiz2pbkkKelompok

4. Video Presentasi Kelompok:

    Anggota:

        1. Dilla Wahdana

        2. Nadya Zuhria A

        3. Mashita Dewi