Topic outline

  • Pengantar Perkuliahan

    Halo dan selamat datang di mata kuliah Pemrograman Web!

    Perkenalkan, saya Sutamrin dan Abdurrahman Hamid, dosen yang akan membimbing kalian selama satu semester ini dalam mempelajari pemrograman web. Saya sangat antusias bisa menemani kalian dalam mempelajari keterampilan yang sangat relevan di dunia digital saat ini.

    Mata kuliah ini akan mengajarkan dasar-dasar pemrograman web,  yang digunakan untuk membangun antarmuka web yang interaktif. Selain itu, kita juga akan masuk lebih dalam ke pemrograman server-side menggunakan PHP. PHP adalah salah satu bahasa pemrograman yang banyak digunakan dalam pengembangan web dinamis, seperti pembuatan form, autentikasi pengguna, hingga pengelolaan data menggunakan database.

    Selama perkuliahan ini, kalian akan mempelajari bagaimana menggunakan PHP untuk mengembangkan aplikasi web yang dapat berkomunikasi dengan database dan memberikan pengalaman dinamis bagi pengguna. Penggunaan PHP ini akan membantu kalian memahami cara kerja back-end dari sebuah website, serta bagaimana mengintegrasikannya dengan front-end agar website tersebut berfungsi secara optimal.

    Perkuliahan ini akan berbasis proyek, sehingga di akhir semester kalian diharapkan dapat mengembangkan sebuah aplikasi web yang utuh menggunakan PHP, yang tentunya bisa menjadi bagian dari portofolio kalian.

    Mari kita mulai perjalanan ini dengan semangat, dan bersama-sama kita akan belajar bagaimana membangun website yang profesional dan fungsional!


    CAPAIAN PEMBELAJARAN MATAKULIAH
    Setelah mengikuti perkuliahan ini, mahasiswa diharapkan:

    1. Memiliki kemampuan pemahaman konsep dasar desain web berupa tampilan html
    2. Memiliki kemampuan dan keterampilan dalam menghsilkan konten atau produk-produk media berbasis web yang memiliki nilai kreatifitas dan objektif
    3. Memiliki kemampuan dan keterampilan akan konsep pemrograman berbasi web sebagai penunjang dalam mendesain tampilan html sebuah web
    4. Memiliki kemampuan dan keterampilan akan konsep basis data sebagai penunjang dalam membuat aplikasi berbasis web.


  • 1. Pendahuluan: Pengantar Web HTML


    Selamat pagi, Adik-adki Mahasiswa sekalian!

    Hari ini, kita akan memulai perjalanan kita dalam Pemrograman Web dengan mempelajari salah satu elemen dasar yang sangat penting, yaitu HTML (HyperText Markup Language). HTML adalah bahasa yang menjadi fondasi dari setiap halaman web yang pernah Anda kunjungi. Ini adalah tempat di mana semua konten web diatur dan ditampilkan.

    Sebagai pengembang web, memahami HTML adalah langkah pertama yang harus dikuasai. Tanpa HTML, sebuah halaman web tidak akan memiliki struktur atau konten yang dapat dipahami oleh browser. Di sini, kita akan membahas bagaimana HTML bekerja, mengapa ia penting dalam pengembangan web, dan bagaimana Anda bisa mulai membangun halaman web sederhana dengan HTML.

    Jadi, siapkan diri Anda untuk belajar lebih dalam tentang bagaimana halaman-halaman web yang Anda kunjungi setiap hari dibangun, dan bagaimana Anda dapat menciptakan halaman-halaman tersebut sendiri!


    • HTML Page

      1. Awal Mula HTML
      HTML pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991. Tim, seorang ilmuwan komputer di CERN, menciptakan HTML sebagai cara untuk berbagi dokumen di seluruh jaringan komputer, yang akhirnya dikenal sebagai World Wide Web (WWW). HTML memungkinkan pengguna untuk menautkan dan mengakses dokumen melalui internet. Pada versi pertama HTML, hanya ada beberapa tag dasar yang digunakan untuk menyusun konten, seperti tag untuk heading, paragraf, dan tautan.


    • Untuk Menambah Pengetahuan dan Pemahaman Anda tentang HTML, silahkan buka dan baca/nonton video pada link dibawah ini


    • Pengantar HTML Quiz

      Untuk melihat pemahaman Anda silahkan jawab pertanyaan-pertanyaan dalam quiz berikut

  • 2. HTML: Link, List, Image dan Table



    Selamat pagi/siang semuanya! Senang bisa bertemu kembali di pertemuan kedua kuliah pemrograman web. Saya harap kalian sudah memahami dasar-dasar HTML yang kita pelajari minggu lalu. Hari ini, kita akan melanjutkan perjalanan kita untuk lebih mendalami beberapa elemen penting HTML yang sering digunakan dalam pengembangan web. Materi yang akan kita bahas hari ini meliputi link, list, image, dan table.

    Pengantar Materi:

    Pada pertemuan pertama, kita telah mempelajari dasar-dasar struktur HTML, seperti tag, elemen, dan atribut. Sekarang kita akan memperluas pengetahuan kita dengan memahami beberapa elemen penting yang memberikan fungsi dan struktur tambahan dalam halaman web.

    1. Link (Tautan)

    2. List (Daftar)

    3. Image (Gambar)

    4. Table (Tabel)


  • 3. HTML: Form, Frame dan Font



    Halo Mahasiswa, selamat datang kembali di perkuliahan Pemrograman Web! Saya harap kalian dalam keadaan baik dan siap melanjutkan materi berikutnya. Pada pertemuan sebelumnya, kita sudah membahas bagaimana cara menggunakan link, list, image, dan table dalam HTML. Sekarang, kita akan masuk ke materi yang lebih lanjut yang juga sangat penting dalam pengembangan web.

    Pada pertemuan kali ini, kita akan mempelajari tiga elemen penting dalam HTML yang sering digunakan dalam membuat halaman web yang interaktif dan lebih menarik, yaitu Form, Frame, dan Font.

  • 4. Pengenalan Framework HTML



    Halo mahasiswa semuanya! Selamat datang kembali di perkuliahan Pemrograman Web. Semoga kalian dalam keadaan baik dan tetap semangat belajar. Pada pertemuan sebelumnya, kita telah membahas tentang HTML: Link, List, Image, dan Table. Kalian pasti sudah mulai terbiasa dengan elemen-elemen dasar dalam HTML yang digunakan untuk membuat halaman web lebih terstruktur.

    Dalam pengembangan web modern, penggunaan framework HTML sangat membantu dalam mempercepat proses pembuatan halaman web yang responsif, efisien, dan terstruktur dengan baik. Framework HTML menyediakan kumpulan komponen dan aturan yang sudah dirancang sedemikian rupa, sehingga pengembang tidak perlu membuat kode dari nol. Framework ini memudahkan dalam pembuatan tata letak, gaya, dan interaksi yang konsisten di berbagai perangkat dan ukuran layar.

  • 5. Pengantar PHP



    Halo Mahasiswa, apa kabar semuanya? Semoga kalian dalam keadaan baik dan selalu semangat dalam mengikuti perkuliahan Pemrograman Web. Pada pertemuan sebelumnya, kita telah membahas HTML secara mendalam, mulai dari struktur dasar hingga elemen interaktif seperti form, tabel, dan lainnya. Sekarang, saatnya kita melangkah ke bahasa pemrograman yang lebih dinamis untuk mengembangkan aplikasi web yang interaktif dan fungsional.

    Pengantar Materi: PHP dalam Pemrograman Web

    Pada pertemuan kali ini, kita akan mempelajari dasar-dasar PHP (Hypertext Preprocessor), sebuah bahasa pemrograman server-side yang sangat penting dalam pengembangan web. Jika HTML berfungsi untuk mendesain tampilan halaman web, PHP digunakan untuk membuat halaman tersebut lebih dinamis, yaitu dengan memungkinkan interaksi dengan server dan data pengguna. PHP dapat berinteraksi dengan database, memproses input dari form, dan bahkan menghasilkan halaman HTML yang responsif terhadap tindakan pengguna.


    • Pengertian PHP Page

      Pengertian PHP 

      PHP adalah bahasa pemrograman yang digunakan di sisi server, artinya PHP dijalankan di server web sebelum halaman web dikirim ke browser pengguna. PHP sering digunakan dalam aplikasi web yang membutuhkan pengolahan data seperti login, registrasi, atau pengelolaan konten.

      PHP dapat disisipkan langsung ke dalam kode HTML untuk memproses dan menampilkan data dinamis. Misalnya, PHP bisa digunakan untuk menampilkan data dari database, membuat formulir dinamis, atau bahkan memproses login dan logout.
       


    • Cara Kerja PHP Page

      Cara Kerja PHP:

      PHP bekerja dengan cara menerima permintaan dari browser (HTTP request), kemudian memprosesnya di server dan mengirimkan hasilnya kembali ke browser dalam bentuk HTML atau data lain yang bisa dibaca oleh browser.


    • Instalasi PHP pada Windows untuk pengembangan Page

      Langkah awal untuk pengembangan aplikasi jika menggunakan OS windows, maka dapat digunakan aplikasi yang berupa Paket Pengembangan seperti XAMPP, Apserver ataupun LAMP/WAMP

  • 6. PHP: Struktur dasar dan Variabel


    Halo Mahasiswa! Selamat untuk kalian yang telah berhasil menyelesaikan pertemuan pertama dan menginstal paket pengembangan PHP seperti XAMPP dengan sukses. Ini adalah langkah penting dalam memulai perjalanan kalian untuk belajar PHP. Dengan XAMPP atau server lokal lainnya, kalian sekarang memiliki lingkungan pengembangan lengkap yang siap untuk menjalankan kode PHP. Semoga proses instalasi berjalan lancar, dan jika ada kesulitan, kalian bisa selalu berdiskusi.


    Bahan Bacaan Pelengkap

    Struktur Dasar dalam PHP

    Variabel dalam PHP


  • 7. PHP: Struktur Kendali dan Array


    Halo mahasiswa semua, bagaimana kabarnya? Saya harap kalian dalam kondisi baik dan siap untuk melanjutkan pembelajaran kita di mata kuliah Pemrograman Web. Kalian telah belajar banyak konsep dasar, mulai dari HTML hingga dasar-dasar PHP. Selamat bagi kalian yang sudah aktif dalam mengikuti perkuliahan dan terus berlatih. Hari ini, kita akan membahas dua topik penting yang menjadi dasar pemrograman dinamis dalam PHP, yaitu Struktur Kendali dan Array.

    1. Struktur Kendali dalam PHP

    Struktur kendali adalah bagian penting dalam semua bahasa pemrograman, termasuk PHP. Struktur ini memungkinkan program untuk membuat keputusan dan menjalankan kode tertentu berdasarkan kondisi yang diberikan. Struktur kendali mempengaruhi alur eksekusi program, sehingga dapat mengontrol bagaimana data diproses atau bagaimana tindakan dijalankan.

    Beberapa Jenis Struktur Kendali yang Akan Kita Bahas:

    • If-Else: Digunakan untuk membuat percabangan logika sederhana berdasarkan kondisi tertentu.

    • Switch-Case: Digunakan ketika ada beberapa kondisi yang mungkin terjadi, alternatif dari penggunaan banyak if-else.
    • Perulangan (Looping): PHP memiliki tiga struktur perulangan utama, yaitu for, while, dan do-while. Perulangan digunakan untuk mengeksekusi blok kode berulang kali selama kondisi tertentu terpenuhi.

    • Struktur Kendali Page

      Pada bagian ini akan dibahas perintah PHP  untuk membuat percabangan kode program atau dikenal juga dengan struktur kondisi / struktur logika. Di dalam bahasa PHP terdapat kondisi IF, IF ELSE, IF ELSE IF, dan struktur SWITCH / CASE.

    • Array pada PHP Page
      Array adalah struktur data yang sangat penting karena memungkinkan kita menyimpan beberapa nilai dalam satu variabel. Berbeda dengan variabel biasa yang hanya bisa menyimpan satu nilai, array dapat menyimpan banyak nilai sekaligus, yang diakses melalui indeks.

  • 8. PHP: Fungsi, Session dan Cookies


    Halo mahasiswa semuanya! Saya harap kalian semua dalam keadaan baik dan tetap bersemangat dalam belajar. Kita sudah memasuki tahap lebih lanjut dalam mata kuliah Pemrograman Web, dan saya bangga melihat perkembangan kalian sejauh ini. Teruslah berlatih dan eksplorasi lebih banyak konsep yang akan membuat pemahaman kalian tentang web development semakin dalam.

    Pada pertemuan kali ini, kita akan mempelajari tiga topik penting yang sangat sering digunakan dalam pengembangan web dinamis, yaitu Function, Session, dan Cookies. Ketiga konsep ini sangat krusial dalam membangun aplikasi web yang interaktif, efisien, dan user-friendly.


  • 9-10. CRUD Dalam PHP: Creat, Read, Update, Delete (Case Method)



    Halo mahasiswa semua! Bagaimana kabarnya? Semoga kalian tetap bersemangat dalam perkuliahan kita. Setelah mempelajari dasar-dasar PHP, pada pertemuan kali ini kita akan membahas salah satu konsep yang sangat penting dalam pengembangan aplikasi web, yaitu CRUD.

    Apa Itu CRUD?

    CRUD adalah singkatan dari Create, Read, Update, dan Delete. Konsep CRUD adalah pondasi utama dalam pengembangan aplikasi web yang melibatkan interaksi dengan database. Dengan CRUD, kita bisa melakukan operasi dasar pada data yang tersimpan di database seperti MySQL.

    1. Create: Menambahkan data baru ke dalam database.
    2. Read: Membaca atau menampilkan data dari database.
    3. Update: Memperbarui data yang sudah ada dalam database.
    4. Delete: Menghapus data dari database.

    Operasi CRUD digunakan di hampir semua aplikasi web dinamis, baik itu aplikasi manajemen konten, e-commerce, maupun sistem informasi.


    • Pengenalan MYSQL sebagai bagian dari CRUD data dalam PHP Page

      CRUD adalah akronim untuk Create, Read, Update, dan Delete. Operasi CRUD adalah manipulasi data dasar berbasis database, dalam hal ini adalah database MYSQL. oleh karena itu perlu lakukan pengenalan tentang database MYSQL


    • CRUD data database MYSQL Page

      Operasi CRUD atau biasa di kenal dengan Create, Read Update dan Delete merupakan operasi yang sangat sering digunakan ketika seorang programer membuat suatu program dengan PHP. CRUD merupakan salah satu inti dari sebuah pemrograman karena di dalam suatu program biasanya mencakup operasi Create atau menciptakan data, Read atau Menampilkan data, Update atau mengedit suatu data dan Delete atau menghapus data.
      Pada kesempatan kali ini kita akan mencoba untuk membahas bagaimana cara membuat sebuah aplikasi sederhana dan cara menerapkan operasi CRUD.

    • Diskusi Pembentukan Kelompok dan Rencana Project Forum

      SIlahkan Bentuk Kelompok dengan anggota maksimal 3 orang, kemudian diskusikan tentang Rencana Project yang dibuat. Buatkan file presentasi terhadap Rencana project yang akan dibuat dan presentasikan nanti pada pertemuan selanjutnya.

      Satu kelopok 1 Topik Diskusi

  • 11. Pengerjaan Project (Team Based Project)


    Halo mahasiswa semuanya! Semoga kalian semua dalam keadaan sehat dan tetap semangat dalam mengikuti perkuliahan kita. Pada minggu sebelumnya, kalian sudah berdiskusi mengenai rencana project yang akan menjadi bagian penting dari penilaian di mata kuliah Pemrograman Web ini. Saya sangat mengapresiasi partisipasi aktif kalian selama diskusi tersebut, dan sekarang saatnya kita melanjutkan ke tahap berikutnya, yaitu Presentasi Rencana Project.

    Tujuan Presentasi Rencana Project

    Kegiatan presentasi ini bertujuan untuk memberikan kesempatan bagi kalian untuk:

    1. Memaparkan rencana project yang telah disusun—baik itu dalam bentuk aplikasi web, sistem informasi, atau situs web interaktif.
    2. Mendapatkan umpan balik—baik dari saya sebagai dosen maupun dari teman-teman sesama peserta mata kuliah.
    3. Memperjelas ruang lingkup dan target project—sehingga kalian memiliki arahan yang lebih jelas dalam pengembangan web selanjutnya.
    4. Mengembangkan kemampuan komunikasi—terutama dalam menjelaskan ide dan konsep teknis kepada audiens.

    Format Presentasi:

    Setiap kelompok atau individu akan diberi waktu 10-15 menit untuk memaparkan:

    • Ide project dan tujuan utama: Apa masalah yang ingin diselesaikan melalui aplikasi web yang kalian kembangkan?
    • Rancangan fitur utama: Apa saja fitur yang akan diimplementasikan? Fitur apa yang menjadi fokus utama?
    • Teknologi yang digunakan: Apakah kalian akan menggunakan framework PHP, MySQL, CSS, atau alat lain?
    • Tantangan yang diantisipasi: Apa saja hambatan yang mungkin dihadapi dalam proses pengembangan, dan bagaimana cara kalian mengatasinya?

    Setelah presentasi, akan ada sesi tanya jawab dan diskusi yang bertujuan untuk memperdalam ide serta memberikan masukan konstruktif.

    Persiapan Sebelum Presentasi:

    • Pastikan rencana project kalian telah didiskusikan dengan baik dalam kelompok.
    • Buatlah slide presentasi yang ringkas dan jelas, mencakup poin-poin utama seperti ide project, fitur, teknologi, dan alur kerja.
    • Latih cara penyampaian presentasi agar jelas, terstruktur, dan mudah dipahami oleh audiens.

    • Pengumpulan File PPT Rencana Project Assignment

      Silahkan Kumpulkan file PPT rencana projectnya pada form penugasan ini dalam bentuk file PPT dan PDF. Selain itu juga susunlah Agenda/Jadwal penyusunan project Anda mulai dari Awal sampai pada pertemuan ke 14. Agenda dibuat dalam bentuk tabel yang kemudian dilakukan screenshot untuk dimasukkan dalam penugasan ini

  • 12 - 15. Pengerjaan Project (Team Based Project)


    Halo mahasiswa semua! Semoga kalian dalam keadaan sehat dan tetap antusias dalam mengerjakan project yang sedang berjalan. Pada minggu ini, kita akan memasuki fase penting dalam proses pengembangan project, yaitu Monitoring Project. Kegiatan ini bertujuan untuk memantau kemajuan dari setiap tim dalam rangka penyusunan project, memastikan bahwa semuanya berjalan sesuai rencana, dan membantu mengatasi kendala yang dihadapi.

    Tujuan Monitoring Project:

    Monitoring project bertujuan untuk:

    1. Memeriksa perkembangan tiap tim: Kami akan meninjau seberapa jauh kalian telah mengembangkan project sejak presentasi rencana.
    2. Memberikan bimbingan: Setiap tim akan mendapat masukan dan saran dalam proses pengembangan agar tetap berada di jalur yang benar.
    3. Mengidentifikasi masalah: Apabila ada tantangan atau hambatan yang dihadapi selama pengembangan, ini adalah saat yang tepat untuk mendiskusikannya dan menemukan solusi bersama.
    4. Mengatur timeline: Mengingatkan dan membantu setiap tim dalam mengatur waktu serta prioritas tugas-tugas penting hingga project selesai tepat waktu.

    Proses Monitoring:

    1. Laporan Progres: Setiap tim diminta untuk menyiapkan laporan progres singkat tentang apa saja yang sudah diselesaikan, tantangan yang dihadapi, dan langkah selanjutnya. (Pelaporan setiap anggota Tim)
    2. Diskusi Perkembangan: Selama sesi monitoring, kita akan membahas progress yang telah dicapai, dan kalian juga bisa bertanya atau meminta masukan mengenai kendala teknis atau non-teknis yang muncul.
    3. Feedback dan Rekomendasi: Setelah diskusi, saya akan memberikan feedback dan rekomendasi untuk membantu kalian mengoptimalkan waktu dan sumber daya dalam pengembangan project.

    Persiapan Monitoring:

    • Setiap tim harus mempersiapkan dokumentasi perkembangan project, termasuk fitur yang sudah diimplementasikan, desain yang sudah dibuat, dan komponen lain yang telah selesai.
    • Tentukan juga hal-hal yang ingin kalian diskusikan atau tanyakan selama sesi monitoring.
    • Bersiaplah untuk mendemonstrasikan bagian project yang sudah berjalan (jika memungkinkan).

  • Topic 12

    • Topic 13

      • Topic 14

        • 16. Presentasi Project Akhir (Team Based Project)


          Halo mahasiswa semua! Selamat atas perjalanan panjang kalian dalam mengembangkan project web sepanjang semester ini. Pada pertemuan kali ini, kita akan memasuki tahap penting, yaitu Presentasi Hasil Akhir Project. Ini adalah kesempatan bagi kalian untuk menunjukkan hasil kerja keras dan kreativitas yang telah kalian curahkan selama beberapa minggu terakhir.

          Tujuan Presentasi Hasil Akhir:

          Presentasi hasil akhir project memiliki beberapa tujuan utama:

          1. Memamerkan hasil kerja tim: Setiap kelompok akan memaparkan project yang telah mereka selesaikan, menampilkan fitur-fitur utama yang sudah diimplementasikan.
          2. Menguji fungsionalitas: Kita akan melihat apakah project berjalan sesuai dengan rencana dan apakah semua fungsionalitas yang dijanjikan dapat berfungsi dengan baik.
          3. Mendapatkan umpan balik: Melalui sesi tanya jawab, kalian akan mendapatkan masukan dari dosen dan teman-teman untuk perbaikan lebih lanjut.
          4. Evaluasi final: Presentasi ini akan menjadi bagian dari penilaian akhir project kalian, mencakup aspek teknis, inovasi, dan kemampuan kalian dalam menjelaskan project.

          Format Presentasi:

          Setiap kelompok akan diberikan waktu 15-20 menit untuk presentasi, yang akan mencakup:

          1. Pemaparan ide dan tujuan project: Jelaskan kembali secara singkat tentang latar belakang, tujuan, dan permasalahan yang ingin diselesaikan oleh aplikasi web yang kalian buat.
          2. Demonstrasi fitur utama: Tunjukkan fitur-fitur penting yang sudah diimplementasikan, bagaimana mereka bekerja, dan apa manfaatnya.
          3. Tantangan dan solusi: Bagikan tantangan utama yang dihadapi selama pengembangan dan bagaimana tim kalian mengatasinya.
          4. Penutup dan tanya jawab: Setelah presentasi, akan ada sesi tanya jawab dari dosen dan teman-teman untuk memberikan kritik dan saran yang membangun.

          Persiapan Sebelum Presentasi:

          • Pastikan semua komponen project dapat berjalan dengan baik dan siap untuk ditampilkan.
          • Siapkan slide presentasi yang singkat namun informatif, mencakup poin-poin penting yang sudah dibahas.
          • Latih cara kalian menyampaikan presentasi, agar penjelasan bisa lebih terstruktur dan mudah dipahami.