EAS - Website E-Learning

Nama    : Mohammad Zhafran Dzaky

NRP    : 5025211142

Kelas    : Pemrograman Web (A)

1. Jelaskan perbedaan front end dan Back End

2. Kompetensi apa saja yang harus dikuasai oleh Front End Engineer, dan Back End

   Developer

3. Buatlah struktur tabel dari aplikasi

4. Desainkan bentuk masing-masing menu

5. Implementasikan keseleruhan website

6. Buat video presentasi dan dokumentasi keseluruhan program ke dalam blog. Tuliskan komen di halaman EAS ini link blog anda

Jawaban :

1. Front-end adalah bagian dari sebuah aplikasi atau situs web yang berfokus pada tampilan antarmuka dan interaksi dengan pengguna. Ini melibatkan penggunaan bahasa pemrograman seperti HTML, CSS, dan JavaScript untuk merancang antarmuka yang menarik, intuitif, dan responsif. Front-end juga memastikan agar aplikasi dapat berfungsi dengan baik di berbagai perangkat. Jika diumpamakan sebagai sebuah restoran, frontend adalah seperti area depan restoran yang terlihat oleh pelanggan. Ini mencakup tampilan visual, desain menu, dan pengalaman pelanggan. Seperti dekorasi menarik, antarmuka yang mudah digunakan, dan interaksi dengan pelanggan.

   Di sisi lain, Back-end adalah seperti dapur restoran yang tersembunyi dari pandangan pelanggan. Di sini, semua proses persiapan makanan, pemrosesan pesanan, dan manajemen persediaan terjadi. Ini juga melibatkan manajemen data, logika bisnis, dan koneksi dengan sistem lain. Singkatnya, back-end adalah bagian yang bekerja di balik layar. Ini mencakup bahasa pemrograman seperti PHP, Python, atau JavaScript (Node.js) untuk mengelola data, menjalankan logika aplikasi, dan berkomunikasi dengan basis data. Back-end juga menangani keamanan, skalabilitas, dan kinerja aplikasi. Jadi, front- end dan back-end bekerja sama untuk membentuk aplikasi yang lengkap dan berfungsi dengan baik.

2. Front-end Engineer:

• - Bahasa Pemrograman: HTML, CSS, JavaScript, TypeScript, dan penggunaan framework seperti Next.Js, React, Angular, atau Vue.js.

• -  Tampilan dan Desain: Pemahaman mendalam tentang tata letak, desain responsif, desain UI/UX, dan kemampuan untuk mengimplementasikan desain ke dalam kode dengan akurasi dan keseuaian.

• -  Interaksi Pengguna: Mampu membuat antarmuka pengguna yang interaktif dan responsif dengan menggunakan teknik seperti animasi, validasi formulir, penanganan peristiwa, dan manajemen data serta API. 

• -  Penanganan Perangkat dan Browser: Memastikan aplikasi atau situs web berfungsi dengan baik di berbagai perangkat seperti desktop, tablet, dan perangkat seluler, serta memastikan kompatibilitas dengan berbagai browser seperti Chrome, Firefox, Safari, dan Edge.

• -  Pengujian dan Debugging: Mampu melakukan pengujian unit, pengujian integrasi, dan pengujian fungsional untuk memastikan kualitas kode front-end. Kemampuan untuk mengidentifikasi dan memperbaiki bug atau masalah performa.

• -  Optimisasi Kinerja: Memahami teknik-teknik optimisasi kinerja front-end seperti penggunaan caching dan penggunaan lazy loading.

  Back-end Developer:

• -  Bahasa Pemrograman: Mendalami bahasa pemrograman seperti Python, PHP, Ruby, Java, C#, atau JavaScript (Node.js) serta framework terkait seperti Django, Laravel, Ruby on Rails, Spring, atau Express.js.

• -  Basis Data: Memahami model basis data, penggunaan SQL untuk manipulasi dan pengambilan data, serta pengoptimalan kueri.

• -  Arsitektur Aplikasi: Pemahaman tentang arsitektur aplikasi, seperti arsitektur berbasis lapisan (layered architecture), arsitektur berorientasi layanan (service- oriented architecture), atau arsitektur berbasis mikro (microservices architecture).

• -  Keamanan: Memahami konsep keamanan aplikasi, implementasi otentikasi dan otorisasi, enkripsi data, serta langkah-langkah pencegahan serangan seperti serangan injeksi (SQL injection, XSS), dll.

• -  Pengembangan API: Kemampuan untuk merancang
  , mengembangkan, dan mendokumentasikan API (Application Programming Interface) yang baik, termasuk pemilihan format data seperti JSON atau XML, dan implementasi metode HTTP seperti GET, POST, PUT, dan DELETE.

• -  Skalabilitas dan Kinerja: Pemahaman tentang teknik-teknik skalabilitas dan kinerja aplikasi, termasuk penggunaan caching, pengaturan server, manajemen beban (load balancing), dan pengoptimalan kueri basis data. 

    3. Berikut ini adalah desain tabel CDM dan PDM untuk website E-Learning kelompok saya

        - Desain CDM

        - Desain PDM

    4. Desain untuk masing - masing menu kelompok saya buat menggunakan figma,

        - Berikut ini adalah desain untuk halaman home atau landing

        - berikut ini adalah untuk halaman auth berisi login dan register

            

        - berikut ini adalah untuk halaman tutor dan course

    5. Pengimplementasian website ini saya lakukan secara berkelompok dengan hasil seperti ini dengan anggota kelompok sebagai berikut :

        - Calvin Janitra               5025211120

        - Kevin Nathanael H.     5025211140

        - M. Zhafran Dzaky       5025211142

    

    Berikut ini adalah dokumentasi untuk website yang telah kami buat,

    

    

    6. Untuk penjelasan lengkap dan demo website dapat dilihat pada pada link berikut ini :

    

    Link github       : github
    Link website     : Eduweb