Web Programming

Coursework and practice projects for the Web Programming course.

About the Course

This course introduces programming concepts using a web platform for students who already have knowledge of structured programming and object programming. Topics include the principles of web technologies and their use to create applications.

Learning Outcomes (Capaian Pembelajaran Mata Kuliah)

1. Students are able to explain web programming concepts.
2. Students are able to analyze problems using a web approach.
3. Students are able to model problem solutions using a web application approach.
4. Students are able to implement and host solutions from web applications that are built.

Course Schedule

Week	Topic
1	Intro + HTML
2	HTML
3	CSS
4	JavaScript
5	JavaScript & Bootstrap/Tailwind
6	Build FE & generate to other platforms
7	UTS (Midterm Exam)
8	PHP – CRUD
9	PHP – CRUD
10	PHP – CRUD
11	PHP – CRUD & API
12	Golang & HTML CRUD
13	Golang & HTML CRUD
14	React Intro
15	Next.js
16	UAS (Final Exam)

Repository Contents

Folder	Description
Session5/	PHP + MySQL CRUD basics, with data export
Session6/	CRUD with login, logout, session-based authentication and user management
Session7/	Login and registration with a separate admin area (admin/)
Kopipiro/	Coffee shop mini project: CRUD, authentication, registration, user management and export
ETS/paket1/	Exam: student data CRUD (db_academic)
ETS/paket2/	Exam: product data CRUD (db_shop)

How to Run (XAMPP)

1. Install XAMPP and start Apache and MySQL.
2. Clone this repository into C:\xampp\htdocs\:

   git clone https://github.com/YOUR-USERNAME/web-programming.git

3. Create the database in phpMyAdmin (http://localhost/phpmyadmin). For the ETS projects, import the database.sql file in each folder.
4. Check the database settings in each folder's config.php (the default is user root with an empty password).
5. Open the project in your browser, for example: http://localhost/web-programming/Session5/

Tech Stack

HTML · CSS · JavaScript · Bootstrap/Tailwind · PHP · MySQL · Golang · React · Next.js