Membuat tampilan Welcome to CodeIgniter

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas     : PBKK A

Membuat tampilan Welcome to CodeIgniter

Sama seperti minggu kemarin, kita akan membuat tampilan Hello World menggunkan CodeIgniter. Untuk langkah-langkahnya sebagai berikut:

1. install XAMPP

Unduh XAMPP untuk Windows dari situs web resmi XAMPP, kalian bisa klik link berikut Download

2. Lakukan instalasi XAMPP

Ikuti panduan penginstalan. Anda dapat memilih komponen yang ingin diinstal. Untuk menjalankan CodeIgniter, Anda perlu memastikan bahwa Apache dan MySQL dicentang.

Anda akan diminta memilih direktori untuk menyimpan folder dan project yang akan dibuat nantinya. Anda dapat membiarkannya pada pengaturan default atau memilih direktori yang sesuai untuk Anda. Klik "Next" dan tunggu hingga proses instalasi selesai.

2. lakukan instalasi CodeIgniter 4 menggunakan composer

Buka git bash pada folder "path\to\xampp\htdocs\"

Sesuai pada panduan Dokumentasi command "composer create-project codeigniter4/appstarter namaProject --no-dev"

jika muncul error seperti gambar diatas, dapat diatasi dengan:

    a. buka XAMPP nya, lalu klik "config" pada module apache

    b. pilih file php.ini, lalu habus semicolon pada "intl"

    c. start kembali apache

Atau bisa menggunakan command "composer create-project --ignore-platform-req=ext-intl codeigniter4/appstarter CI4App"

Hapus folder project codeigniter yang sudah dibuat sebelumnya dan jalankan command instalasi codeigniter lagi

3. jalankan server project

pertama masuk kedalam folder project yang sudah dibuat dengan menjalankan command berikut:

4. Webpage project dapat diakses melalui "localhost:8080"

Link Github: https://github.com/dilwdn/codeIgniter_Introduction.git

Introduction CodeIgniter 4

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas      : PBKK A

Introduction CodeIgniter 4

    Assalamualaikum semua, pada blog kali ini kita akan membahas mengenai CodeIgniter. Codeigniter adalah sebuah framework php yang bersifat open source dan menggunakan metode MVC (Model, View, Controller). Framework codeigniter di buat dengan tujuan  untuk memudahkan developer atau programmer dalam membangun sebuah aplikasi berbasis web tanpa harus membuat nya dari awal. 

    Untuk tugas yang diberikan kali ini yaitu instalasi CodeIgniter sekaligus membuat program semacam Hello World! ataupun sejenis Welcome Page lainnya. Disini saya telah berhasil menginisialisasi project "CI4App" yang saya buat dengan framework CI via CLI.

Untuk langkah pengerjaan sebagai berikut:

1. install beberapa software requirement:

    a. XAMPP: windows Download

    b. VSCode: windows Download

    c. Composer: windows Download

    d. Git Bash: windows Download

2. lakukan instalasi CodeIgniter 4 menggunakan composer

Buka git bash pada folder "path\to\xampp\htdocs\"

Sesuai pada panduan Dokumentasi command "composer create-project codeigniter4/appstarter namaProject --no-dev"

jika muncul error seperti gambar diatas, dapat diatasi dengan:

    a. buka XAMPP nya, lalu klik "config" pada module apache

    b. pilih file php.ini, lalu habus semicolon pada "intl"

    c. start kembali apache

Atau bisa menggunakan command "composer create-project --ignore-platform-req=ext-intl codeigniter4/appstarter CI4App"

Hapus folder project codeigniter yang sudah dibuat sebelumnya dan jalankan command instalasi codeigniter lagi

3. jalankan server project

pertama masuk kedalam folder project yang sudah dibuat dengan menjalankan command berikut:

4. Webpage project dapat diakses melalui "localhost:8080"

Pembuatan Project Hello-World

1. buat file css dan template 

yang mana isinya adalah file php untuk membuat tampilan dan isi konten websitenya

2. Buat file testing.php pada folder controler. 

controller ini akan dipanggil ketika Anda mengakses URL yang sesuai.

3. Tambah code rute pada file routes.php

Rute pertama adalah rute utama (/) yang mengarahkan ke metode index di controller Home. Rute kedua adalah rute /testing yang mengarahkan ke metode index di controller Testing.

4. Jalankan program

Caranya dengan memasukkan command "php spark serve" pada git bash, lalu ketik "http://localhost:8080/testing" pada web browser

Hasil progran CodeIgniter

Github: https://github.com/dilwdn/codeIgniter_Introduction.git

ETS Pweb

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas      : Pweb A

ETS Pweb

1. Jelaskan fungsi html, css, javascript, bootstrap, dalam pembangunan aplikasi web.

1. HTML (HyperText Markup Language):
           HTML adalah bahasa markah standar yang digunakan untuk membuat struktur dan konten halaman web. HTML menyediakan elemen-elemen dasar seperti judul, paragraf, gambar, formulir, dan banyak lagi. Ini memberi dasar bagi semua halaman web dan mendefinisikan struktur dasar dokumen web.
2. CSS (Cascading Style Sheets):
             CSS digunakan untuk mengontrol tata letak dan penampilan halaman web. Dengan CSS, Anda dapat mengatur warna, jenis font, ukuran, dan tata letak elemen HTML. Ini memisahkan struktur (HTML) dan presentasi (CSS) dari halaman web, memungkinkan pengembang untuk membuat halaman web yang estetis dan mudah dibaca.
3. JavaScript:
                JavaScript adalah bahasa pemrograman yang berjalan di sisi klien (di peramban web pengguna) dan memberikan interaktivitas pada halaman web. Dengan JavaScript, Anda dapat membuat efek animasi, memvalidasi formulir, berinteraksi dengan pengguna melalui jendela pop-up, dan memanipulasi elemen halaman web secara dinamis. JavaScript juga memungkinkan pengembang untuk mengakses dan mengubah data yang ditampilkan pada halaman web.
4. Bootstrap:
               Bootstrap adalah kerangka kerja pengembangan web front-end yang dirancang untuk mempercepat proses pengembangan. Ini menyediakan kumpulan alat dan gaya pradesain yang memungkinkan pengembang untuk membuat tata letak responsif dan desain yang menarik dengan mudah. Bootstrap menyediakan komponen UI, grid system, navigasi, formulir, dan banyak lagi, yang semuanya dirancang agar terlihat baik dan berfungsi dengan baik di berbagai perangkat dan ukuran layar.

    Jadi, dalam pengembangan aplikasi web, HTML digunakan untuk membuat struktur halaman, CSS digunakan untuk mengatur tata letak dan penampilan, JavaScript digunakan untuk memberikan interaktivitas, dan Bootstrap (atau kerangka kerja serupa) digunakan untuk mempercepat pengembangan dengan menyediakan komponen dan gaya pradesain yang dapat digunakan oleh pengembang. Kombinasi dari semua teknologi ini memungkinkan pembangunan aplikasi web yang dinamis, responsif, dan estetis.

2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.

1. Membuat CV sederhana menggunakan HTML
         Project yang saya buat ini menggunakan bahasa pemrograman HTML saja. Dimana project ini menampilkan  riwayat pendidikan, pengalaman, project, dan lain-lain.  HTML menggunakan sistem tag untuk mendefinisikan berbagai elemen pada halaman web, seperti judul, paragraf, link, gambar, formulir, dan banyak lagi. Untuk project yang telah saya buat bisa lihat di sini https://github.com/dilwdn/CV_HTML.git
   
   
   
   
2. Membuat portofolio Menggunakan CSS
        Project yang saya buat ini menggunakan CSS. Yang mana tampilannya lebih bagus daripada hanya menggunakan html. Disini berisi beberapa segmen ada home, about yang berisi riwayat pendidikan, portofolio yang berisi beberapa experience yang saya miliki, dll. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML. Untuk project yang telah saya buat bisa lihat di sini
   
   
   
   
   
3. Membuat Form Registrasi menggunakan JavaScript
   Disini saya membuat website Registrasi menggunakan JavaScript. Dengan menggunakan javascript membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Untuk project yang telah saya buat bisa lihat di sini https://github.com/dilwdn/FormRegistrasi_PwebA.git
   
   
   
   
   
   
   
   
   
4. Membuat Page Login/Register menggunakan Bootstrap
          Project ini saya membuat web registrasi menggunakan Bootstrap. Dengan boostrap kita dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Untuk project yang telah saya buat bisa lihat di sini https://github.com/dilwdn/Tugas5_Bootstrap.git
   
   
   

3. Sebuah perpustakaan ingin membuat aplikasi web. Fungsi aplikasi untuk display koleksi buku, peta lokasi, informasi berita/ kegiatan, dan pendaftaran online. Desainkan front end website perpustakaan.

4. Implementasikan desainmu dan buat dokumentasi.

    Link github: https://github.com/dilwdn/ETS_Pweb.git

5. Presentasikan dalam video youtube, dan diembedded ke dalam blog dokumentasi.

quis 1 PBKK

Nama : Dilla Wahdana

NRP : 5025211060

Kelas : PBKK A

QUIZ 1

1. Jelaskan struktur framework , dan apa saja kegunaanya dalam pengembangan Perangkat Lunak?

    Kerangka kerja (framework) dalam pengembangan perangkat lunak adalah struktur dasar yang telah disediakan untuk memudahkan pengembangan aplikasi atau sistem. Ini adalah kumpulan aturan, konvensi, alat, dan komponen yang memungkinkan pengembang untuk membangun perangkat lunak dengan lebih cepat dan efisien. Berikut adalah penjelasan tentang struktur framework dan kegunaannya dalam pengembangan perangkat lunak:

Struktur Framework:

1. Komponen Dasar:
   Framework biasanya terdiri dari komponen dasar, seperti perpustakaan (library) dan modul-modul yang sering digunakan. Ini mencakup tugas umum seperti manajemen database, keamanan, antarmuka pengguna, dan masih banyak lagi.
2. Direktori dan Berkas:
   Framework biasanya memiliki struktur direktori dan berkas yang telah ditentukan. Ini membantu mengatur kode dan sumber daya dalam proyek dengan konsistensi. Contohnya, ada direktori untuk model, tampilan, pengontrol (controller), konfigurasi, dan sumber daya seperti gambar dan berkas CSS.
3. Model-View-Controller (MVC) atau Pola Serupa:
   Banyak framework mengikuti pola desain Model-View-Controller (MVC) atau varian serupa. Ini memisahkan logika bisnis (model), antarmuka pengguna (view), dan kendali (controller) dalam aplikasi. Struktur ini membantu membagi peran dan tanggung jawab dengan jelas dalam proyek.
4. Routing:
   Framework seringkali memiliki sistem routing yang menentukan bagaimana permintaan HTTP akan ditangani. Ini memetakan URL ke fungsi atau pengontrol yang sesuai, memungkinkan Anda untuk menentukan tindakan apa yang harus diambil ketika pengguna mengakses berbagai halaman atau jalur aplikasi.
5. Komponen UI:
   Framework umumnya menyediakan komponen antarmuka pengguna (UI) yang dapat digunakan untuk membangun tampilan. Ini termasuk elemen-elemen seperti formulir, tombol, tabel, dan lainnya. Penggunaan komponen ini memungkinkan konsistensi dalam desain antarmuka.
6. Konfigurasi:
   Framework sering memiliki berkas konfigurasi yang memungkinkan Anda menyesuaikan perilaku aplikasi. Ini dapat mencakup pengaturan seperti koneksi database, kunci rahasia, dan opsi lainnya.
7. Middleware:
   Beberapa framework memiliki konsep middleware yang memungkinkan Anda menambahkan fungsi-fungsi yang diproses sebelum atau setelah permintaan mencapai pengontrol. Middleware sering digunakan untuk tugas seperti otentikasi, autorisasi, dan manajemen sesi.
8. Kode Kustom:
   Anda dapat menambahkan kode kustom Anda sendiri ke dalam kerangka kerja sesuai kebutuhan proyek. Kode ini akan berinteraksi dengan komponen-komponen framework yang telah ada.

Kegunaan Framework:

1. Pengembangan Lebih Cepat:
   Framework memungkinkan pengembang untuk memanfaatkan komponen yang sudah ada, mengurangi kerja ulang, dan mempercepat proses pengembangan.
2. Konsistensi:
   Framework mempromosikan konsistensi dalam kode dan desain. Ini membuat kode lebih mudah dipahami, dikelola, dan dirawat oleh pengembang lain.
3. Kualitas Tinggi:
   Framework sering kali memuat praktik terbaik dalam pengembangan perangkat lunak. Penggunaan pola desain yang sudah ada dan pengujian yang telah diintegrasikan dapat meningkatkan kualitas perangkat lunak.
4. Skalabilitas:
   Framework biasanya dirancang dengan pertimbangan skalabilitas, yang memungkinkan pengembangan aplikasi yang dapat tumbuh seiring waktu dan permintaan.
5. Keamanan:
   Banyak framework telah memasukkan tindakan keamanan bawaan, seperti perlindungan terhadap serangan SQL Injection, Cross-Site Scripting (XSS), dan Cross-Site Request Forgery (CSRF).

    Secara keseluruhan, framework adalah alat yang kuat dalam pengembangan perangkat lunak karena mereka membantu meningkatkan produktivitas, kualitas, dan keamanan, sambil menyediakan kerangka kerja yang sudah teruji dan terstruktur bagi pengembang untuk membangun aplikasi yang kompleks.

2. Dalam pembuatan aplikasi, dikenal dengan Universal Windows Platform. Digunakan untuk membuat aplikasi yang mempunyai karakteristik seperti apa? Jelaskan sertai dengan contoh.

    Universal Windows Platform (UWP) adalah platform pengembangan aplikasi yang dikembangkan oleh Microsoft untuk membuat aplikasi yang dapat berjalan di berbagai perangkat Windows, termasuk PC, tablet, smartphone, Xbox, dan banyak perangkat lainnya. Aplikasi UWP memiliki beberapa karakteristik utama:

1. Universal:
   Aplikasi UWP dirancang untuk berjalan di berbagai perangkat Windows tanpa perubahan signifikan. Mereka dapat mengadaptasi antarmuka pengguna sesuai dengan perangkat yang digunakan.
2. Responsif dan Fleksibel:
   Aplikasi UWP dapat menyesuaikan diri dengan berbagai ukuran layar dan orientasi perangkat, memberikan pengalaman pengguna yang konsisten.
3. Akses ke API Windows:
   Aplikasi UWP memiliki akses ke berbagai API Windows, memungkinkan pengembang untuk mengakses fitur-fitur sistem operasi dan perangkat keras.
4. Keamanan:
   Aplikasi UWP diisolasi satu sama lain dan dari sistem operasi, meningkatkan keamanan sistem.Contoh Aplikasi UWP: Microsoft Photos: Aplikasi ini memungkinkan pengguna mengelola dan mengedit koleksi foto mereka dengan mudah menggunakan UWP.
5. OneNote:
   Aplikasi catatan digital yang memungkinkan pengguna membuat catatan, menggambar, dan menyimpan ide menggunakan UWP.
6. Paint 3D:
   Aplikasi desain 3D yang memungkinkan pengguna membuat gambar dan objek 3D dengan mudah menggunakan UWP.

    Dengan menggunakan UWP, pengembang dapat menciptakan aplikasi yang dapat dijalankan di berbagai perangkat Windows tanpa perlu mengembangkan ulang untuk setiap perangkat, menghemat waktu dan usaha pengembangan.

3. Untuk memperjelas jawaban no 2, Buatlah desain aplikasi Koleksi Album foto yang bisa menghimpun foto, deskripsi , informasi foto diambil/ metadata, dan juga bisa menghapus maupun update.

Untuk lebih jelasnya bisa dilihat pada link github berikut:

https://github.com/dilwdn/Quiz1-PBKK.git

4. Berikut adalah hasil pengerjaan saya untuk nomor 4 dalam bentuk video

Membuat Form Login

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas     : Pweb A

Membuat Form Login Dengan Bootstrap

Pada pertemuan ke-7 ini kita belajar tentang Bootstrap. Boostrap dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang dibangun dengan menggunakan JavaScript.

Untuk penugasnnya kita di minta membuat Form Login dengan mengimplementasikan Bootstrap ini

github: https://github.com/dilwdn/Tugas5_Bootstrap.git

Membuat NET MAUI

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas      : PBKK A

Membuat Aplikasi Mobile dengan NET MAUI

    .NET MAUI (Multi-platform App UI) adalah platform pengembangan aplikasi lintas platform yang dikembangkan oleh Microsoft. Dengan menggunakan .NET MAUI, pengembang dapat membuat aplikasi mobile, desktop, dan web dengan menggunakan satu basis kode sumber. Ini memungkinkan pengembang untuk membuat aplikasi yang berjalan di berbagai platform, termasuk Android, iOS, macOS, Windows, dan Linux, dengan menggunakan kode yang sama.

    .NET MAUI memungkinkan pengembang untuk membuat antarmuka pengguna aplikasi menggunakan teknologi XAML, yang merupakan bahasa markup yang digunakan untuk mendefinisikan antarmuka pengguna dalam aplikasi .NET. Pengembang juga dapat menggunakan C# sebagai bahasa pemrograman utama untuk logika aplikasi.

    .NET MAUI juga menyediakan kontrol dan alat bantu yang dioptimalkan untuk pengembangan aplikasi lintas platform, memungkinkan pengembang untuk membuat aplikasi dengan tampilan dan nuansa yang konsisten di berbagai perangkat dan sistem operasi.

    Dengan .NET MAUI, pengembang dapat mengurangi usaha pengembangan dan pemeliharaan aplikasi lintas platform, karena mereka dapat menggunakan satu basis kode sumber untuk mencakup berbagai platform, menghemat waktu dan sumber daya. Platform ini merupakan bagian dari ekosistem .NET dan merupakan pilihan populer untuk pengembangan aplikasi lintas platform.

Github: https://github.com/dilwdn/mobile_NET_MAUI.git

Membuat Form Registrasi

 Nama    : Dilla Wahdana

NRP       : 5025211060

Kelas      : Pweb A

Membuat Form Registrasi Menggunakan JavaScript

    Pada pertemuan kali ini, di kelas Pweb A kita belajar tentang javascript. JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

    Untuk memahami materi lebih lanjut, saya diberikan tugas untuk membuat suatu form registrasi yang terdiri dari nama mahasiswa, nim, mata kuliah, dan dosen. Form registrasi ini memiliki aturan sebagai berikut. Ketika pengguna sistem akan mengisikan data nama dengan memasukkan huruf tertentu maka akan muncul rekomendasi tertentu.

Berikut hasil pekerjaan saya:

Github: https://github.com/dilwdn/FormRegistrasi_PwebA