Dyandra Paramitha's

EAS Pemrograman Web: Edu High School Management System

Reviewed by Dyandra Paramitha on December 21, 2021 Rating: 5

Tugas 9: Upload dan Edit Gambar CRUD

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://smk-coding-pendaftaran.000webhostapp.com/

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

Introduction

Pada penugasan ke-9, kami diminta untuk berlatih membuat fitur upload dan edit gambar pada CRUD pendaftaran yang sebelumnya telah dibuat di penugasan ke-8.

PHP adalah bahasa penulisan skrip open-source yang biasanya digunakan dalam pemrograman atau pengembangan website. PHP atau Hypertext Preprocessor sebenarnya mirip dengan JavaScript dan Python, perbedaannya adalah PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server (backend).

PHP sering kali digunakan untuk pengembangan web. Hal ini dikarenakan PHP memiliki sebuah fitur yang dirasa sangat berguna, yaitu kemampuannya untuk disematkan ke file HTML.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan PHP.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari tugas.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat beberapa internal CSS untuk menambahkan sedikit detail.

PHP sebagai bahasa scripting, yang disematkan ke dalam file HTML yang telah dibuat. Selain itu, untuk melakukan koneksi kepada database, saya menggunakan phpMyAdmin.

Gambar Website:

Source Code

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

config.php

index.php

form-daftar.php

form-edit.php

list-siswa.php

proses-pendaftaran.php

proses-edit.php

hapus.php

Tugas 9: Upload dan Edit Gambar CRUD

Reviewed by Dyandra Paramitha on December 14, 2021 Rating: 5

Tugas 8: Membuat Form Pendaftaran Siswa Dengan PHP

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://smk-coding-pendaftaran.000webhostapp.com/

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

Introduction

Pada penugasan ke-8, kami diminta untuk berlatih membuat form pendaftaran menggunakan PHP.

PHP sering kali digunakan untuk pengembangan web. Hal ini dikarenakan PHP memiliki sebuah fitur yang dirasa sangat berguna, yaitu kemampuannya untuk disematkan ke file HTML.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan PHP.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari tugas.

PHP sebagai bahasa scripting, yang disematkan ke dalam file HTML yang telah dibuat. Selain itu, untuk melakukan koneksi kepada database, saya menggunakan phpMyAdmin.

Gambar Website:

Source Code

Link Source Code: https://github.com/dydyandra/pendaftaran-siswa-pweb

config.php

index.php

form-daftar.php

form-edit.php

list-siswa.php

proses-pendaftaran.php

proses-edit.php

hapus.php

Tugas 8: Membuat Form Pendaftaran Siswa Dengan PHP

Reviewed by Dyandra Paramitha on November 30, 2021 Rating: 5

ETS PWEB 2021

Read

ETS PWEB 2021

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Jawaban ETS

No. 4

Untuk no. 4 kami diminta untuk membuat sebuah website berdasarkan kriteria yang telah diberikan. Untuk membuat website, saya menggunakan tools:

HTML untuk struktur web
CSS (external dan internal) untuk desain dan style web
Framework bootstrap sebagai tambahan dari CSS. Hal ini untuk membuat pembuat web front menjadi lebih efektif dan efisien. Adapun dengan bootstrap, antarmuka website menjadi responsif.
Javascript untuk validasi form (menggunakan SweetAlert)
Ajax

Link Website : Link Website

Source Code

Link Github: Github

Link Website Link Website

Halaman Utama Halaman PortofolioHalaman Kontak Halaman About Me Stylesheet

Demo ETS

ETS PWEB 2021

Reviewed by Dyandra Paramitha on November 16, 2021 Rating: 5

Tugas 7: Ajax Sederhana

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://dydyandra.github.io/latihan-ajax/

Link Source Code: https://github.com/dydyandra/latihan-ajax

Introduction

Pada penugasan ke-7, kami diminta untuk berlatih menggunakan Ajax.

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari kedua tugas.

JS digunakan untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan menggunakan fungsi yang akan berjalan apabila website diload.

XMLHttpRequest yang berguna sebagai kendaraan pertukaran data asinkronus dengan web server.

JSON digunakan sebagai dokumen transfer.

Untuk men-deploy, saya menggunakan Github Pages.

Gambar Website:

Source Code:

Halaman Utama:

Latihan 1:

Latihan 2:

Link Source Code: https://github.com/dydyandra/latihan-ajax

Tugas 7: Ajax Sederhana

Reviewed by Dyandra Paramitha on November 09, 2021 Rating: 5

Tugas 6: Membuat Form Login dan Contact dengan Bootstrap

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website:

1. Sign In Form: https://dydyandra.github.io/bootstrap-forms/

2. Contact Form: https://dydyandra.github.io/bootstrap-forms/contact.html

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Introduction

Pada penugasan ke-6, kami diminta untuk membuat form login dan contact dengan menggunakan Bootstrap.

Isi dari Form

Komponen yang digunakan pada form adalah card yang berisi form dan button. Adapun isi dari form yaitu:

1. Form Login

Form login berisi input username, password, dan button. Selain itu terdapat button untuk login menggunakan website lain seperti Google, Facebook atau SSO.

2. Form Contact

Form contact berisi input nama depan, nama belakang, email, keperluan dan pesan. Terdapat juga button untuk mengirimkan pesan tersebut.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, CSS dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari form login dan contact. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat internal CSS untuk menambahkan beberapa style pada komponen.

JS untuk menambahkan validasi input form, dan untuk menambahkan modal yang akan muncul apabila form sudah disubmit.

Untuk men-deploy, saya menggunakan Github Pages.

Gambar Form:

Source Code:

Contact Page:

Link Source Code: https://github.com/dydyandra/bootstrap-forms

Penutup

Bootstrap memiliki banyak manfaat dalam pembuatan web, yaitu fleksibel dikarenakan dapat digunakan berulang kali dan juga desainnya yang responsif sehingga proses membangun website dapat menjadi lebih cepat, mudah, dan efisien. Selain itu, penggunaan bootstrap juga meminimalisir bug, dan juga ukuran file yang lebih kecil.

Tugas 6: Membuat Form Login dan Contact dengan Bootstrap

Reviewed by Dyandra Paramitha on October 18, 2021 Rating: 5

Tugas 5: Membuat Form dengan Validasi Menggunakan Javascript

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://dydyandra.github.io/form-vaksinasi

Link Source Code: https://github.com/dydyandra/form-vaksinasi

Introduction

Pada penugasan ke-5, kami diminta untuk membuat form vaksinasi dengan menggunakan validasi dari JavaScript.

Isi dari Form

Isi dari form terdiri atas beberapa input seperti nama, NRP, email, departemen, status vaksin,, uploa file sertifikat, dan perjanjian bahwa data yang iisi adalah benar.

Komponen yang digunakan dalam form antara lain adalah form input, form select, dan button.

Adapula komponen modal dan alert yang digunakan untuk validasi yang dilakukan saat selesai mengisi form.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, dan CSS, dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan.

JS untuk menambahkan validasi input form, dan untuk menambahkan modal yang akan muncul apabila form sudah disubmit.

Untuk men-deploy, saya menggunakan Github Pages.

Gambar Form:

Source Code:

Link Source Code: https://github.com/dydyandra/form-vaksinasi

Penutup

Form masih dapat dikembangkan lagi ke depannya, dengan menambahkan beberapa input form lain yang sekiranya penting dan menggunakan fungsi lain untuk dilakukan validasi. Adapun dari tugas ini, saya belajar lebih banyak tentang penggunaan JavaScript dan bagaimana cara mengimplementasikannya dalam bidang pengembangan web.

Tugas 5: Membuat Form dengan Validasi Menggunakan Javascript

Reviewed by Dyandra Paramitha on October 12, 2021 Rating: 5

Tugas 4: Website Katalog

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: http://thereadingden.me/

Link Source Code: https://github.com/dydyandra/the-reading-den

Introduction

Pada penugasan ke-4, kami diminta untuk membuat katalog dari suatu website.

Isi dari Website

Website yang dibuat yaitu website untuk toko buku online. Website yang dibuat terdiri dari beberapa page yaitu: Home Page berisi list katalog awal, pilihan genre buku, dan slideshow yang berisi promo ataupun highlight dari website; Halaman List Buku yang berisi buku-buku sesuai kategori; dan Halaman Product Detail untuk melihat detail dari buku.

Tools Yang Digunakan:

Untuk membuat, saya menggunakan HTML, dan CSS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini saya menggunakan CSS berupa external CSS dikarenakan penggunaannya yang lumayan banyak untuk jenis tag/selector yang berbeda-beda, sehingga lebih efektif dan efisien menggunakan external CSS. Selain menggunakan external CSS terdapat pula beberapa inline CSS yang digunakan.

JS untuk menambahkan animasi slider pada carousell sehingga bisa berubah gambar.

Untuk men-deploy, saya menggunakan Github Pages.

Penampilan Website

Home Page

List Buku pada Kategori Classics

Product Detail

Source Code

Terdapat beberapa file Source Code yang akan dilink yaitu:

1. Halaman Utama : https://github.com/dydyandra/the-reading-den/blob/master/index.html

2. Halaman List Buku : https://github.com/dydyandra/the-reading-den/blob/master/list.html

3. Halaman Product Details : https://github.com/dydyandra/the-reading-den/blob/master/product-details.html

4. External CSS yang digunakan: https://github.com/dydyandra/the-reading-den/blob/master/style.css

Penutup

Website yang dibuat masih dapat dikembangkan kembali, contohnya dengan menambahkan halaman cart, dan menambahkan fitur-fitur lain seperti Profil dan Tracking Order. Adapun dari tugas yang diberikan ini, saya lebih mengenal bagaimana cara menggunakan beberapa elemen seperti membuat card, slideshow, dan lainnya.

Tugas 4: Website Katalog

Reviewed by Dyandra Paramitha on September 28, 2021 Rating: 5

Tugas 2: Pembuatan Profil Diri Menggunakan HTML

Read

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://dydyandra.github.io/profil

Link Source Code: https://github.com/dydyandra/profil

Introduction

Pada penugasan ke-2, kami diminta untuk membuat suatu profile page untuk diri kita menggunakan basic HTML dan CSS (dalam file HTML), dan mempublishnya pada suatu domain.

Isi dari Website Profile Diri

Isi dari website profile diri yang saya buat terbuat dari 2 halaman dimana halaman pertama berisi identitas diri saya, dan halaman kedua berisi riwayat pendidikan, informasi umum seperti hobi dan kontak saya.

Tools Yang Digunakan:

Untuk membuat profile sendiri, saya menggunakan HTML, dan CSS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut. HTML yang saya gunakan yaitu HTML:5. Dalam website kali ini, saya menggunakan beberapa tag untuk pembuatan table, foto, dan heading. Tag-tag ini kemudian saya berikan suatu atribut class untuk dihubungkan dengan CSS internal.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini saya menggunakan 2 jenis CSS yaitu internal dan inline CSS. Adapun dari class yang telah tertera pada HTML akan digunakan untuk mendeklarasikan selector dan properties dari setiap class untuk memberikan style pada bagian tersebut.

Untuk men-deploy, saya menggunakan Github Pages.

Penampilan Website

Source Code

Terdapat 2 file pada source code yaitu:

Penutup

Dari tugas yang diberikan ini, saya berlatih cara menggunakan beberapa elemen HTML, tag dan atribut HTML, dan cara menggunakan CSS yang bersifat inline atau internal. Salah satu kelemahan menggunakan CSS yang bersifat inline maupun internal yaitu apabila website yang kita buat berskala besar, sehingga kode yang kita buat pada HTML akan menjadi tidak rapi dan ukurannya besar, sehingga untuk ke depannya lebih baik menggunakan external CSS. Saya juga belajar bagaimana penggunaan atribut HTML sangat berguna dan bermanfaat untuk pengklasifikasian CSS yang lebih rapi juga.

Tugas 2: Pembuatan Profil Diri Menggunakan HTML

Reviewed by Dyandra Paramitha on September 14, 2021 Rating: 5

Tugas 1: Pembuatan Website Profil Diri

Read

https://github.com/dydyandra/cv-dyandra

Tugas 1: Pembuatan Website Profil Diri

Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119

Kelas: PWEB-B

Link Website: https://dydyandra.github.io/cv-dyandra

Link Source Code: https://github.com/dydyandra/cv-dyandra

Introduction

Pada perkuliahan sebelumnya, kami diminta untuk membuat suatu profile page untuk diri kita, dan mempublishnya pada suatu domain.

Isi dari Website Profile Diri

Isi dari website profile diri yang saya buat yaitu:

1. Identitas diri

2. Deskripsi diri

3. Skills yang dimiliki

4. Work / Academic-related Experience

5. Organization experience

Tools Yang Digunakan:

Untuk membuat profile sendiri, saya menggunakan HTML, CSS, dan JS.

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut.
CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website.
JS digunakan untuk menambah beberapa animasi pada website tersebut, seperti contohnya agar header bisa tetap terlihat saat kita men-scroll ke bawah.

File-file yang digunakan untuk profile sendiri kemudian di-push ke suatu repository baru di Github.
Apabila repository telah terbuat, kemudian di-deploy menggunakan Github Pages.

Tampilan Website Profil Diri yang Dibuat

Tampilan Website Profil Diri

Source Code:

HTML:

CSS:

Link Website:

https://dydyandra.github.io/cv-dyandra

Penutup

Dari tugas yang diberikan ini, saya berlatih menggunakan HTML, CSS, dan JS dan belajar bagaimana cara membuat suatu tampilan yang rapi dan juga kode yang clean. Selain itu, saya juga menjadi lebih termotivasi lagi untuk mengembangkan skill saya dalam pemrograman web.