Pertemuan 7 PWEB - Membuat Website Course

Nama : Kadek Fajar Pramartha Yasodana

NRP : 5025231185

Kelas : PWEB E

Membuat Website Kursus

Pada tugas kali ini, saya membuat sebuah website kursus yang mengintegrasikan layout-layout yang sedikit rumit. Selain itu juga terdapat beberapa bagian tipe yang bisa dipilih pada bagian kursus, dan container tersebut akan memberikan kursus yang sesuai dengan pilihan tanpa mereload website.

Source Code : GitHub

Link Hosting Kursus : Vercel

Link Hosting Semua Project : Vercel

Screenshot Offers


Screenshot Algorithms

Screenshot Web

Screenshot Game

index.html

File index.html pada project ini merupakan halaman web yang menggunakan HTML5. Di dalam elemen <head>, terdapat dua tautan stylesheet (normalize.css dan styles.css) yang digunakan untuk menormalkan gaya default browser dan menerapkan gaya khusus pada halaman, serta satu skrip JavaScript (script.js) yang dimuat secara defer untuk memastikan skrip dijalankan setelah halaman selesai dimuat.

Di dalam elemen <body>, terdapat elemen <nav> yang berfungsi sebagai navigasi utama halaman. Elemen ini berisi gambar logo (cryothink.png) dan dua elemen <div> yang masing-masing berisi elemen <h3> dengan teks "Home" dan "Course". Kedua elemen <div> ini memiliki atribut onclick yang menggunakan metode scrollIntoView() untuk menggulir halaman ke elemen dengan ID home dan course ketika diklik.

Selanjutnya, terdapat elemen <main> yang berfungsi sebagai konten utama halaman. Di dalamnya, terdapat elemen <div> dengan ID home dan kelas home, yang menampilkan gambar latar belakang (homebackground.png), judul "Premium Course", deskripsi singkat tentang kursus premium yang ditawarkan oleh Cryothink, dan tombol "Learn More" yang menggulir halaman ke bagian kursus ketika diklik.

Bagian kursus (course) terdiri dari elemen <aside> yang berisi tombol-tombol navigasi untuk berbagai kategori kursus seperti "Offers", "Algorithms", "Web", dan "Game". Di sebelahnya, terdapat elemen <section> yang berisi berbagai kursus yang ditawarkan. Setiap kursus ditampilkan dalam elemen <div> dengan kelas course-item, yang berisi header dengan judul kursus, gambar, deskripsi singkat, dan tombol "Learn More".

Bagian kursus algoritma (course-algorithms) mencakup kursus dasar, struktur data, dan graf, masing-masing dengan deskripsi yang lebih mendetail dan harga. Bagian kursus pengembangan web (course-web) mencakup kursus HTML & CSS, Node JS, Deployment, dan Frameworks, dengan deskripsi dan harga masing-masing. Bagian kursus pengembangan game (course-gamedevelopment) mencakup kursus Unity, OpenGL, Shaders, dan Vulkan, dengan deskripsi dan harga masing-masing.

Terakhir, terdapat elemen <footer> yang berisi teks "Made by Kadek Fajar Pramartha Yasodana", menunjukkan pembuat halaman web ini.


script.js

Kode JavaScript ini mengelola tampilan dan interaksi dari berbagai bagian kursus pada halaman web. Pertama, kode ini mengambil referensi ke elemen-elemen HTML yang mewakili tombol-tombol navigasi dan bagian-bagian kursus, kemudian menyimpannya dalam array untuk memudahkan pengelolaan. Variabel activeIndex digunakan untuk menyimpan indeks dari bagian kursus yang sedang aktif, dan TYPE_COUNT menyimpan jumlah total jenis kursus. 

Fungsi setActive diinisialisasi dengan memanggil setActive(0) untuk mengatur tampilan awal agar bagian "Offers" aktif saat halaman pertama kali dimuat. Event listener ditambahkan ke setiap tombol navigasi untuk memanggil fungsi setActive dengan indeks yang sesuai ketika tombol diklik.

Fungsi setActive mengatur bagian kursus mana yang aktif berdasarkan indeks yang diberikan, dengan menghapus kelas button-aside-choosed dari tombol yang tidak aktif dan menambahkan kelas inactive ke bagian kursus yang tidak aktif, serta menambahkan kelas button-aside-choosed ke tombol yang aktif dan menghapus kelas inactive dari bagian kursus yang aktif.





Comments

Post a Comment

Popular posts from this blog

Pertemuan 1 KPPL - Software Engineer

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Email : fajaryasodana@gmail.com Foto Pribadi: CATATAN PERTEMUAN 1 Skill apa yang dibutuhkan untuk menjadi Software Engineer, Tentukan Career Path, Profesi yang bisa dimasuki oleh seorang Software Engineer -Software Engineer merupakan seorang insinyur yang bertugas merancang, mendesain, membuat, dan mengetest sebuah perangkat lunak. Maka dari itu terdapat beberapa skill yang harus dimiliki oleh seorang Software Engineer, antara lain:     a. Menguasai bahasa pemrograman     b. Menguasai alur perancangan pembuatan software yang baik     c. Menguasai dan mengikuti perkembangan tools & framework     d. Memiliki skill komunikasi yang baik     e. Dapat bertanggung jawab atas software yang telah dibuat -Untuk career path dari seorang software engineer itu sendiri bisa menjadi berbagai macam karena Software Engineer tidak hanya terpacu pada pembuatan software saja, mereka bisa menjadi seo...
Read more

Pertemuan 13 OOP - Abstraksi & Simulasi Fox & Rabit

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PBO A Abstraksi & Simulasi Fox & Rabit 1. Tuliskan implementasi dari program kecil Abstract Class Makhluk hidup yang diwariskan kepada manusia, hewan, dan tumbuhan Source Code :  GitHub Pada soal nomor ini, kita hanya perlu membuat sebuah abstract class makhluk hidup dengan beberapa metode abstrak juga. Setelah itu kita inherit classnya menjadi beberapa subclass Manusia, Hewan, dan Tumbuhan. Terdapat beberapa class seperti MakhlukHidup.java public abstract class MakhlukHidup { protected String name ; public MakhlukHidup (String name) { this . name = name ; } public abstract void doSomething () ; public abstract void grow () ; public abstract void breathe () ; } Class ini merupakan class yang sebagai template sebuah class makhluk hidup. dengan beberapa method yang harus di override oleh subclassnya yaitu doSomething, grow, dan breathe Manusia.java public class Manusia extends M...
Read more

Pertemuan 12 PWEB - Update Database Pendaftaran Siswa

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PWEB E Update Database Pendaftaran Siswa Pada tugas kali ini saya melakukan update dari applikasi website yang telah dibuat pada pertemuan sebelumnya sesuai kriteria yang diminta. Terdapat beberapa update seperti penambahan tabel baru pada database yaitu pegawai . Pada list-siswa.php juga dapat menampilkan semua pegawai. Selain itu ui juga sedikit diperbarui pada form-pendaftaran dan form-update dengan menambahkan select option untuk pegawai pendaftaran. Source Code :  GitHub Pada penambahan table, saya tinggal menambahkan query untuk membuat tabel begawai, untuk melakukan seeding untuk menambahkan data pegawai dengan cara langsung melakukan eksekusi query INSERT INTO pada wait_for_database.sh #!/bin/bash ./wait_for_it.sh -h $DB_HOST -p $MYSQL_PORT -t 30 -s && {     mysql --password= " $MYSQL_ROOT_PASSWORD " --execute= "GRANT ALL PRIVILEGES ON $MYSQL_DATABASE .* TO ' $MYSQL_USER '@...
Read more