shabiqghazi / 2223-IF215007_8-pengembangan-aplikasi-web-1

🌏 IF215007 IF215008 Pengembangan Aplikasi Web

🌟 The Course Learning Outcomes (CLO)

You have to dream before your dreams can come true.

Kode	Bobot	Deskripsi
CLO-0211	30 %	Mahasiswa mampu menjelaskan komponen infrastruktur dalam pengembangan aplikasi web
CLO-0212	35 %	Mahasiswa mampu mengimplementasikan pemrograman client side dan server side serta mengintegrasikannya dengan database untuk digunakan dalam pengembangan aplikasi web
CLO-0213	35 %	Mahasiswa mampu mengimplementasikan framework dan manajemen konten dalam pengembangan aplikasi berbasis web

📟 The Assessments Plan

We must all suffer from one of two pains: the pain of discipline or the pain of regret.

Theory Class (2 credit)

CLO	Bobot CLO	Bentuk Asesmen	Bobot Asesmen
CLO-0211	30 %
		Quiz	5
		Media Ajar 5 SD	25
CLO-0212	35 %
		Quiz	5
		Project: Proposal	3
		Project: Web Page	10
		Project: Backend	17
		Sertifikat Seminar, Training & Workshop	+5
CLO-0213	35 %
		Quiz	5
		Project: Web Page	10
		Project: Backend	15
		Peragaan: CMS	5
		Sertifikat Seminar, Training & Workshop	+5

Workshop Class (1 credit)

CLO	Bobot CLO	Bentuk Asesmen	Bobot Asesmen
CLO-0211	30 %
		Demo : Git installation	1
		Demo : Github project initialization	1
		Demo : Hoppscotch / Postman access	1
		Demo : PHP & Composer installation & hello world	2
		Demo : PostgreSQL / MySQL installation	2
		Demo : DBeaver installation & DB connection	2
		Demo : MobaXterm installation & SSH connection	2
		Demo : NodeJS & NPM installation, operation & hello world	4
		Demo : Linux server operation	5
		Demo : Nginx / Apache web server installation & operation	5
		Demo : Cpanel operation	4
		Demo : Domain registration	1
CLO-0212	35 %
		Demo : HTML Responsive Layout with Media Query & Flexbox	3
		Demo : Javascript Data Transformation	4
		Demo : Browser API - Event Handling, Local Storage, Element manipulation	5
		Demo : HTTP GET & POST using Form Action and Fetch API	5
		Demo : PHP DB - Dynamic Web Page	5
		Demo : PHP DB - Web Service	5
		Demo : OOP-based PHP Project using Composer	4
		Demo : Deploy PHP Project to Cpanel	4
CLO-0213	35 %
		Demo : HTML Responsive Layout with Bootstrap	3
		Demo : Single Page App with React & React-router	12
		Demo : Dynamic Web Page using Laravel	9
		Demo : Web Service using Slim	6
		Demo : News Site using Wordpress	5

🌷 The Course

The more that you read, the more things you will know. The more that you learn, the more places you’ll go.

• Komunikasi Digital 📡
  • Bagaimana data bisa berpindah tempat ?
  • HTTP dan kawan kawan
    • Struktur HTTP Request
    • Struktur HTTP Response
  • Client dan Server - si peminta dan si pemberi
• Browser dan Halaman Web
  • Browser
  • Halaman web
  • Membuat halaman web
    • HTML, si pemberi info
    • CSS, si penata gaya
      • Media query, be responsive !
      • Flexbox, ayo membuat layout !
      • @keyframe, ayo membuat animasi !
    • Javascript, si manipulatif yang karirnya cemerlang
  • Ayo kendalikan web browser dan halaman web dengan Javascript !
    • Apa itu Web Browser API ?
  • Responsive Design si adaptif
    • Mobile browser
    • Progressive Web App (PWA) si makhluk amfibi
• Server
  • Apa itu Server ?
    • Linux Server
    • Windows Server
  • Apa itu Web Server ?
    • Nginx
    • Apache
  • Ayo pekerjakan Server !
    • Kasih perintah ke Server pake bahasa apa ?
      • PHP, si sobat sejuta umat
        • Composer
      • NodeJS, Javascript kini mangkal di terminal
        • NPM
      • Puluhan bahasa lainnya yang bisa digunakan (Python, Go, Ruby, Java dsb.)
• Dimana Data Disimpan ? Dari Mana Data Diambil ? 🗃
  • File system
  • Database
• World Wide Web 🌏
• Teknologi Pendukung
  • Content Management System, Aplikasi Web Auto Jadi ? 😮
  • Web Framework, Bikin Coding Jadi Mudah
    • Fullstack
      • Apa itu fullstack ?
      • Codeigniter
      • Laravel
      • Javascript
    • Micro Framework
      • Apa itu micro framework ?
      • PHP Slim
      • Python FastAPI
      • Go Fiber
    • Frontend
      • React
      • Vue
      • Angular
  • Kolaborasi Coding dan Otomasi Deployment via Platform Berbasis Git
    • Git
    • Github
    • Gitlab
• Web Services, Bagaimana Antar Aplikasi Web Ngobrol
  • JSON, bahasa tuker-tukeran data sejuta umat
  • Contoh kasus
    • Gojek
    • Tokopedia
    • Payment gateway
  • Platform populer untuk dicoba
    • Telegram bot
    • Discord bot
• Cloud Services, si Jasa Sewa Segala Rupa
  • Sewa server
    • Virtual server, bebas berdaulat coba semua teknologi
    • Shared hosting, kontrakan ala CPanel
  • Sewa nama domain dan sertifikatnya
  • SaaS, PaaS, dan IaaS
  • Beberapa tempat sewa, beberapa memberi paket ALWAYS FREE, dan FREE TRIAL
    • Luar negeri
      • Amazon Web Service
      • Google Cloud Platform
      • Microsoft Azure
    • Dalam negeri
      • IDCloudHost
      • QWords
• Keamanan Informasi Pada Aplikasi Berbasis Web
  • OWASP
• Alur Proyek Pembangunan Aplikasi Berbasis Web
• Jenis Pekerjaan Terkait Mata Kuliah ini

📖 References

• Developer Roadmap
• Browser & Web Page
  • HTML
  • CSS
    • CSS Flexbox - web.dev
    • CSS Flexbox - css-tricks
    • CSS Animation - web.dev
  • Web API - Javascript
    • HTML DOM API ✨✨✨✨✨
    • Document interface ✨✨✨✨✨
    • Fetch API
    • File API
    • Web Storage API - localstorage
  • Responsive Design
  • Progressive Web Apps
• Web Server
  • HTTP ✨✨✨✨✨
    • POST ✨

⚔ The White Hat Hackers

The first and best victory is to conquer self.

D-Class

E-Class

F-Class

G-Class

E-Class

Question and Answers 💬

Q: Mana saja yang masuk UTS UAS ?
A: OBE memastikan teman-teman memperoleh outcome dari perkuliahan ini