Selasa, 12 Desember 2023

Final Project Pemrograman Web

Nama : Ardhika Krishna W

NRP : 5025221006

Kelas : PWEB B

Tahun : 2023


Final Project Pemrograman Web

Berikut adalah paper yang berhubungan dengan aktivitas pembuatan perangkat lunak/ aplikasi yang saya dapat dari google scholar :

PDF : Full Document

Paper diatas hanya saya jadikan sebagai referensi dan ide untuk studi kasus saya. Kemudian saya kembangkan ide tersebut dan saya implementasikan untuk membuat rancangan umum(frontend dan backend), rancangan databasenya , dan desain frontend. Untuk desain frontend nya sudah saya kembangkan lebih lanjut sesuai keinginan saya.


1. Buatlah deskribsi studi kasus pemrograman web (individu)


Di tengah pesatnya pertumbuhan industri e-commerce, toko sepatu online ini telah memperoleh popularitas yang signifikan dalam penjualan sneakers, sepatu basket, dan sepatu lari. Peningkatan permintaan ini membawa tantangan baru terkait manajemen stok, pelacakan pesanan, dan pengelolaan produk yang efisien. Untuk meningkatkan efisiensi operasional dan meningkatkan pengalaman pengguna, mereka membutuhkan sebuah dashboard admin yang dapat menyediakan informasi lengkap dan kontrol penuh atas penjualan dan stok produk.


2. Buatlah rancangan umum arsitektur atau fitur yang ada dalam aplikasi  (individu)


Frontend:

-Dashboard: Tampilan utama yang menyajikan total users, total categories, total products, dan total orders.

-Customers : Halaman untuk melihat data semua customers.

-Categories : Halaman untuk melihat, menambah, dan menghapus kategori item.

-Product: Halaman untuk melihat, menambah, mengedit, dan menghapus produk, termasuk atribut seperti nama, harga, deskripsi ,dan kategori serta stok.

-Sizes: Halaman untuk melihat, menambah, dan menghapus avalaible sizes.

-Product sizes : Halaman untuk melihat, menambah, mengedit, dan menghapus size dari setiap produk.

-Order: Menampilkan daftar data order dengan kemampuan untuk mengganti status pembayaran dan pengiriman.


Backend:

-Server: Menerima permintaan dari frontend, berinteraksi dengan database, dan memberikan respons.

-Database: Menyimpan data terkait kategori, produk, size, order, dan pengaturan aplikasi.


Database:

-Tabel Users : Menyimpan informasi yaitu data admin dan customers.

-Tabel Kategori: Menyimpan informasi kategori item seperti nama, deskripsi, dll.

-Tabel Produk: Menyimpan informasi produk seperti nama, harga, stok, dan ID kategori terkait.

-Tabel Size: Menyimpan informasi size.

-Tabel Order: Menyimpan informasi order seperti ID produk, jumlah, status pembayaran, status pengiriman, dll.

-Tabel Order Detail : Menyimpan informasi order yaitu produk, size, jumlah dan harga.



3. Rancang desain databasenya (individu)



4. Buat desain front end (individu)  



5. Tentukan action yang akan menghandle logika back end.  (individu)

      Action Backend:

  1. Dashboard:

  • Mengambil total users, total categories, total products, dan total orders dari database.
  • Menghitung statistik lainnya seperti total pendapatan atau item terlaris.
      2. Customers:
  • Mengambil data semua customers dari tabel Users.
      3. Categories:
  • Mengambil daftar semua kategori item dari tabel Kategori.
  • Menambah kategori baru ke dalam database.
  • Menghapus kategori dari database.
      4. Product:
  • Mengambil daftar semua produk dari tabel Produk dengan informasi kategori terkait.
  • Menambah produk baru ke dalam database dengan asosiasi kategori.
  • Mengedit informasi produk dan menyimpan perubahan ke database.
  • Menghapus produk dari database.
      5. Sizes:
  • Mengambil daftar semua sizes dari tabel Size.
  • Menambah size baru ke dalam database.
  • Menghapus size dari database.
      6. Product Sizes:
  • Mengambil daftar size dari setiap produk dari tabel Product Sizes.
  • Menambah size baru untuk produk tertentu ke dalam database.
  • Mengedit atau menghapus size dari produk.
      7. Order:
  • Mengambil daftar data order dari tabel Order dengan informasi produk, status pembayaran, dan status pengiriman.
  • Mengganti status pembayaran dan status pengiriman pada order tertentu dan menyimpan perubahan ke database.

      Logika Autentikasi dan Otorisasi:

      1. Autentikasi:
  • Verifikasi identitas admin atau customer pada halaman login.
  • Menerapkan sistem token untuk otentikasi dan menjaga keamanan akses.
      2. Otorisasi:
  • Memastikan bahwa akses ke halaman tertentu hanya diberikan kepada pengguna yang telah terotentikasi dan memiliki otorisasi yang sesuai.

      Manajemen Database:

      1. Users Table:
  • Menambah, mengedit, atau menghapus data admin atau customer ke dalam tabel Users.
      2. Kategori Table:
  • Menambah, mengedit, atau menghapus data kategori ke dalam tabel Kategori.
      3. Produk Table:
  • Menambah, mengedit, atau menghapus data produk ke dalam tabel Produk.
      4. Size Table:
  • Menambah, mengedit, atau menghapus data size ke dalam tabel Size.
      5. Order Table:
  • Menambah atau mengedit data order ke dalam tabel Order.
  • Memperbarui status pembayaran dan status pengiriman.

      Keamanan:

      1. Validasi Input:
  • Memastikan input dari frontend valid dan aman untuk mencegah SQL injection atau serangan lainnya.
      2. Logging:
  • Mencatat kejadian penting atau kesalahan ke dalam log untuk pemantauan dan penanganan masalah.
      3. Keamanan Token:
  • Memastikan bahwa token otentikasi aman dan berlaku.
      4. Pembaruan Rutin:
  • Melakukan pembaruan rutin untuk menjaga keamanan aplikasi dan dependensinya.
      5. Pemulihan Kesalahan:
  • Memberikan tanggapan yang jelas dan ramah jika terjadi kesalahan atau masalah pada backend.


6. Implementasikan rancangan yang sudah dibuat (pilih salah satu - bisa kelompok maks 3)

Kelompok :

Ardhika Krishna W / 5025221006

Muhammad Iqbal Ramadhan / 5025221274

Faiq Lidan Baihaqi / 5025221294


Berdasarkan 3 tugas fp individu kami masing-masing , ide yang diambil untuk diimplementasikan sebagai tugas fp kelompok adalah ide saya dimana website nya adalah admin page dari sebuah ecommerce toko sepatu. Website ini kami implementasikan kemudian kami kembangkan lebih lanjut menjadi website dengan 2 tampilan yaitu tampilan user/customer dan tampilan admin yang dibagi menggunakan login page. Berikut adalah website ecommerce toko sepatu kami dengan nama toko nya yaitu SoleCity Kicks.

Dokumentasi :













Repository : full code


7. Buat video presentasinya, upload di youtube, dan didokumentasikan di blog





Rabu, 06 Desember 2023

Latihan CRUD dengan output PDF

 Nama : Ardhika Krishna W

 NRP : 5025221006

 Kelas : PWEB B

 Tahun : 2023

   

Pada pertemuan ke-13 ini saya melakukan latihan Very Simple Add,  Edit, Delete, View (CRUD)    menggunakan PHP dan mySQL yaitu dengan membuat form pendaftaran siswa baru dengan tambahan output PDF. Berikut adalah hasil dari latihan yang saya kerjakan :

    





Repository : ardhikakrsh

Latihan CRUD dengan upload foto

 Nama : Ardhika Krishna W

 NRP : 5025221006

 Kelas : PWEB B

 Tahun : 2023

   

Pada pertemuan ke-12 ini saya melakukan latihan Very Simple Add,  Edit, Delete, View (CRUD)        menggunakan PHP dan mySQL yaitu dengan membuat form pendaftaran siswa baru dengan tambahan dapat mengupload file foto pada form. Berikut adalah hasil dari latihan yang saya kerjakan :








Repository : ardhikakrsh

Kamis, 09 November 2023

Membuat Aplikasi CRUD Sederhana

 Nama : Ardhika Krishna W

 NRP : 5025221006

 Kelas : PWEB B

 Tahun : 2023

   

  Pada pertemuan ke-11 ini saya melakukan latihan Very Simple Add,  Edit, Delete, View (CRUD)          menggunakan PHP dan mySQL. Berikut adalah hasil dari latihan yang saya kerjakan :


    Link repository : click here

Kamis, 02 November 2023

Latihan CRUD Pendaftaran Siswa Baru

 Nama : Ardhika Krishna W

 NRP : 5025221006

 Kelas : PWEB B

 Tahun : 2023

 

 Form Pendaftaran Siswa Baru untuk SMA sebagai penerapan CRUD dan MYSQL

CRUD adalah serangkaian fungsionalitas mendasar yang biasanya digunakan dalam manajemen database. CRUD mencakup fungsi Create, Read, Update, dan Delete. Fungsi tersebut merupakan dasar untuk sebagian besar aplikasi software yang berhubungan dengan penyimpanan dan pengambilan data. CRUD merupakan fondasi interaksi dengan database dan sering diimplementasikan dalam logika backend aplikasi web, software, mobile app, dan sistem lain yang memerlukan manajemen data. 


Dengan menggunakan PHP dan MYSQL untuk membuat pendaftaran siswa baru SMA dan referensi pada  https://www.petanikode.com/tutorial-php-mysql/, berikut ini adalah dokumentasi dari website yang telah saya buat :




     


   Berikut adalah link repository dari website diatas : click here


Rabu, 18 Oktober 2023

ETS Pweb B

        Nama : Ardhika Krishna W

       NRP : 5025221006

       Kelas : PWEB B

       Tahun : 2023

      Pertanyaan

  1. 1. Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya?
  2. -Web responsive adalah tampilan website yang dapat menyesuaikan layout pada tampilan device pengguna(jenis device dan ukuran layar berbeda).
  3. -Cara membuat/membangun web responsive adalah mendefinisikan meta tag, tentukan struktur html website, dan membuat media query di css

    Gunakan HTML dan CSS yang Responsif:

    • Pastikan HTML Anda memiliki struktur yang baik dengan elemen-elemen semantik seperti <header>, <nav>, <main>, dan <footer>.

    • Gunakan CSS untuk mengatur tampilan dan tata letak situs. Pastikan Anda memanfaatkan teknik seperti flexbox dan CSS grid untuk mengatur elemen-elemen dengan baik.

    • Gunakan media queries untuk mengubah tampilan situs sesuai dengan lebar layar perangkat. Contoh media query:



    1. Font dan Ukuran Teks yang Responsif:

      • Gunakan ukuran font yang responsif seperti em, rem, atau % agar teks tetap terbaca dengan baik di berbagai perangkat.
      • Pastikan font yang Anda gunakan dapat diakses dengan baik di semua perangkat.
    2. Gambar Responsif:

      • Gunakan elemen <img> dengan atribut srcset untuk menampilkan gambar dengan resolusi yang sesuai dengan perangkat pengguna. Ini akan membantu menghemat bandwidth dan mempercepat waktu muat halaman.


  4. 2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.
  • Tugas 1 yaitu latihan membuat CV dengan HTML dan CSS, berikut adalah CV yang saya buat berdasarkan biodata saya
          Link Repository : web cv
  •     Tugas 2 yaitu latihan membuat web portal berita dengan HTML dan CSS. Berikut adalah web portal yang saya buat dimana terdapat berita seluruh dunia yang terkini dan terupdate :
          Link repository : portal berita



  •     Tugas 3 yaitu latihan membuat halaman web kursus menggunakan HTML dan CSS. Pada latihan ini saya membuat kursus basket yaitu basketball academy, berikut ini adalah web kursus yang saya buat :
          Link repository : web kursus
           


  • Tugas 4 yaitu latihan membuat website undangan pernikahan menggunakan HTML dan CSS. Berikut adalah isi konten dan web wedding invitation yang saya buat :

         Content

                Aset            : Informasi berupa text, gambar, dan musik.

                Informasi    :  Home, Love Story, Schedule, Photos, Location, RSVP.

                Gambar      :  Foto pre-wedding pasangan

                Musik          :  Reality Club - Alexandra


          Link repository : wedding invitation



  •  Tugas 5 yaitu latihan membuat validasi form menggunakan HTML, CSS, dan JavaScript.
    Berikut adalah tampilan web validasi form yang saya buat dan sudah responsive :
         Link Repository : Validation

          

  •  Tugas 6 yaitu latihan membuat page berisi login atau register menggunakan bootstrap. Berikut adalah tampilan login page yang saya buat menggunakan bootstrap dan sudah responsive :
         Link Repository : login page



  1. 3. Sebuah perusahaan  ingin membuat aplikasi web untuk portal berita. Fungsi aplikasi untuk display berita terbaru, pengelompokan kategori, lowongan pekerjaan, informasi iklan atau event kegiatan. Selain itu tersedia juga form untuk pembaca memasukkan artikel atau opini yang ingin dimuat di portal berita. Desainkan front end website perpustakaan.
        Berikut ini adalah design yang saya buat menggunakan figma :

  1. 4. Implementasikan desainmu dan buat dokumentasi.

                Link Repository : source code
        
                Link Deployment : deploy


  1. 5. Presentasikan dalam video youtube, dan diembedded ke dalam blog dokumentasi.
    1. Link Youtube : click here

Rabu, 11 Oktober 2023

Latihan membuat page yang berisi login atau register menggunakan Bootstrap

 Nama : Ardhika Krishna W

 NRP : 5025221006

 Kelas : PWEB B

 Tahun : 2023

 

Pada pertemuan yang ke-7 kali ini, mahasiswa diberikan materi mengenai bootstrap. Kemudian mahasiswa diberi tugas untuk membuat page berisi login atau register menggunakan bootstrap. 

Berikut tugas saya yang saya kerjakan :

 


Repository : Code

Deployment :Deploy

Final Project Pemrograman Web

Nama : Ardhika Krishna W NRP : 5025221006 Kelas : PWEB B Tahun : 2023 Final Project Pemrograman Web Berikut adalah paper yang berhubungan de...