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