LMS-SPADA INDONESIA LMS-SPADA INDONESIA
Global searching is not enabled.

Pemrograman Berbasis Web

  1. Home
  2. Courses
  3. ILMU TEKNIK
  4. TEKNIK ELEKTRO DAN INFORMATIKA
  5. Teknik Informatika
  6. Pemrograman Berbasis Web
Skip to main content

Weekly outline

  • General

    Collapse all Expand all

    PEMROGRAMAN WEB

    Deskripsi Mata Kuliah

    Didalam mata kuliah ini dipelajari pengetahuan tentang web beserta teknologinya serta keahlian untuk mengembangkan situs web menggunakan metode dan cara yang tepat. Pengetahuan dan teknologi web yang akan dipelajari termasuk didalamnya teknologi jaringan internet, terminologi web, bahasa standar web (X)HTML, CSS, dan Javascript, DOM, serta bahasa pemrograman PHP.

    Capaian Pembelajaran
    Mahasiswa yang telah menyelesaikan mata kuliah ini akan dapat mengembangkan situs web berdasarkan tahapan pengembangan arsitektur informasi, menggunakan bahasa standar web seperti HTML untuk menyusun struktur halaman web, CSS untuk mengatur tampilan halaman, Javascript untuk menambahkan elemen interaktif dan dinamis, dan PHP untuk memperluas fungsional situs web sehingga dapat mengolah data yang disimpan dalam database MySQL.


    Selamat Belajar.

  • Pertemuan Ke 1

    • Page icon
      Persiapan Web Server Page
      View

      Sebelum memulai melakukan pembuatan pengkodean bahasa program berbasis web, maka kita wajib mempersiapkan web server. Pada kesempatan ini kita menggunakan web server XAMPP.

      Apa Itu XAMPP?

      XAMPP merupakan aplikasi cross platform: Apache, MySQL, PHP dan Perl. XAMPP juga memberikan solusi sederhana dan cukup ringan dijalankan, memungkinkan Anda membuat web server lokal untuk melakukan pengetesan website.

      XAMPP dapat dijalankan pada Mac dan Linux. Dalam tutorial ini kami akan membahas pada Windows.

      Apa yang Anda Butuhkan?

      Untuk memulai langkah pada tutorial ini, Anda memerlukan:

      1. Komputer dengan sistem operasi Windows
      2. File installer XAMPP
    • Page icon
      Pengenalan HTML Page
      View

      HTML bukanlah bahasa pemograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemrograman lain, dalam HTML tidak akan ditemukan struktur yang biasa ditemukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML adalah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.

      Lalu bagaimana cara menjalankan file html  yang kita buat pada browser?

  • Pertemuan Ke-2

    HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

    Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
    HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).

    html

    • Page icon
      Fungsi HTML (HyperText Markup Language) Page

      HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

      Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

      Fungsi HTML yang lebih spesifik yaitu :

      1. Membuat halaman web.
      2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
      3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

  • Pertemuan Ke-3

    • Page icon
      Paragraf HTML Page

      Pada tutorial kali ini, kita akan belajar beberapa tag:

      • <p> untuk membuat paragraf;
      • <hr> untuk membuat garis lurus;
      • <br> untuk membuat baris baru;
      • <div> untuk membuat paragraf di luar artikel atau layaout;
      • <pre> untuk membuat paragraf dengan format yang sudah ditentukan.

  • Pertemuan Ke-4

    • Page icon
      Format Text di HTML Page
      View

      Teks yang terformat akan lebih mudah dibaca, karena ada penegasan seperti teks tebal, miring, dan garis bawah.

      Saat kita mencari kata atau kalimat penting.. mata kita akan lebih mudah menemukannya pada teks yang terformat dibandingkan plain text.

      Karena itu, dalam membuat web.. ada baiknya menggunakan format teks.

      Nah, di HTML terdapat tag-tag yang khusus digunakan untuk text formatting.

      Apa saja format TEXT yang ada di HTML, mari kita bahas


    • Page icon
      Membuat List di HTML Page
      View

      List dipergunakan untuk memudahkan mata kita dalam membaca data dalam sebuah kelompok yang sama. Contohnya kelompok buah, kita bisa membuat list seperti berikut :

      1. Mangga
      2. Apel
      3. Jeruk
      4. Semangka
      5. dst

      Lantas bagaimana cara membuat list dengan format HTML ? mari kita bahas

  • Pertemuan Ke-5

    • Page icon
      Membuat Tabel Page
      View

      Seringkali kita perlu menampilkan data dalam sebuah tabel agar lebih mudah dibaca. Didalam HTML, telah disediakan fasilitas untuk membuat tabel dengan mudah dengan memanfaatkan tag tag html yang sudah ada. Tabel sendiri selalu terdiri dari Baris dan Kolom. Sedangkan unsur utama dalam tabel dalam HTML ada 4, yaitu :

      1. Baris
      2. Kolom
      3. Sel
      4. Garis

      Bagaimana cara membuat tabel didalam HTML ? mari kita bahas

  • Pertemuan Ke-6

    • Page icon
      Membuat Form Page
      View

      Formulir HTML diperlukan, bila kitaingin mengumpulkan beberapa data dari pengunjung situs. Misalnya, selama pendaftaran pengguna, Anda ingin mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.

      Formulir akan mengambil masukan dari pengunjung situs dan kemudian akan mengirimkanya ke aplikasi back-end seperti CGI, ASP Script atau skrip PHP dll. Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang diteruskan berdasarkan logika bisnis yang ditentukan di dalamnya aplikasi.

      Mari kita bahas apa saja atribut dari Form HTML.......


  • TUGAS UTS

    • Assignment icon
      Tugas UTS Assignment

      Buatlah satu file HTML berisi deskripsi diri / portofolio tentang anda, dengan ketentuan sebagai berikut

      1. File html harus berisi performatan text (huruf tebal, huruf miring, dsb)
      2. File harus mengandung minimal satu buah tabel
      3. File harus berisi foto anda
      4. File harus dibuat dengan tag html, tidak boleh dibuat menggunakan microsoft word
      5. FIle harus diunggah paling lambat sebelum pertemuan minggu depan melalui SPADA UNIKAMA
      6. Mahasiswa yg terlambat mengirimkan tugas UTS maka nilai UTS akan diberikan nilai Nol

      Contoh Portofolio bisa anda cari melalui google

      Selamat Mengerjakan

      Not available unless any of:
      • You belong to 55201-A
      • You belong to 55201-B
      • You belong to 55201-R2

  • Pertemuan Ke-9

    • Page icon
      HTML Semantik Page
      View

      Sejauh ini kita sudah mengenal beberapa tag dasar di HTML, seperti elemen paragraf, heading, list,  tabel, link, dan form. Ketika jumlah elemen yang kita tuliskan sudah banyak, seringkali kita kan merasa bingung sendiri membacanya. Untuk itulah perlu kita terapkan metode penulisan untuk menata elemen-elemen tersebut agar telihat bagus.

      Lantas apa yang kita butuhkan ??

      Yup...... yang kita butuhkan adalah sebuah layout.

      Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen semantik seperti <header>, <aside>, <footer>, <article>, dll.

      Elemen semantik sebenarnya tidak hanya digunakan untuk membuat layout saja. Ia juga digunakan untuk membuat elemen lain.

      Untuk lebih jelasnya, mari kita pelajari lebih detail.

  • Pertemuan Ke-10

    • Page icon
      Pemrograman Javascript Page
      View

      avascript adalah bahasa pemrograman yang wajib kamu pelajari jika ingin mendalami dunia web development.

      Saat ini javascript tidak hanya digunakan di sisi client (browser) saja. Javascript juga digunakan pada server, console, program desktop, mobile, IoT, game, dan lain-lain.

      Hal ini membuat javascript semakin populer dan menjadi bahasa yang paling banyak digunakan di Github.

      Hasil survey Github 2017

      Pada artikel ini, kita akan belajar Javascript dari dasar. Mulai dari pengenalan Javascript, hingga membuat program pertama dengan Javascript.

      Mari kita mulai…


  • Pertemuan Ke-11

    • Page icon
      Javascript - Fungsi Output Page
      View

      Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir.

      Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().

      Ada 4 cara menampilkan output pada Javascript:

      1. Menggunakan Fungsi console.log();
      2. Menggunakan Fungsi alert();
      3. Menggunakan Fungsi document.write();
      4. Menggunakan innerHTML.

      Apa perbedaan dari keempat cara tersebut?


    • Page icon
      Javascript - Memahami Variabel dan Tipe Data Page
      View

      Apa itu variabel?

      …dan apa pula itu tipe data?

      Apapun bahasa pemrograman yang digunakan. Dua hal ini akan selalu ada.

      Lalu apa sebenarnya variabel itu?

      Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

      Kita bisa ibaratkan, variabel itu seperti wadah untuk menyimpan sesuatu.

      Pada kesempatan ini kita akan belajar tentang variabel dan tipe data dalam Javascript.

      Dimulai dari cara membuat, cara mencetak variabel ke output, mengisi ulang, dan menghapusnya dari memori.

      Siap?


  • Pertemuan Ke-12

    • Page icon
      Memahami Percabangan di Javascript Page
      View

      Apa itu percabangan dan kenapa dinamakan percabangan?

      Buat yang belum pernah kuliah atau belajar tentang algoritme dan flowchart, mungkin ini istilah yang baru pertama kamu dengar.

      Isitilah ini sebenarnya untuk menggambarkan alur program yang bercabang.

      Pada flow chart, logika “jika…maka” digambarkan dalam bentuk cabang.

      Logika program jika/maka

      Karena itu, ini disebut percabangan.

      Selain percabangan, struktur ini juga disebut: control flow, decision, struktur kondisi, Struktur if, dsb.

      Percabangan akan mampu membuat program berpikir dan menentukan tindakan sesuai dengan logika/kondisi yang kita berikan.

      Apa saja itu?

      Mari kita bahas…


  • Pertemuan Ke-13

    • Page icon
      Bentuk Perulangan pada Javascript Page
      View

      Apa yang akan kita lakukan saat disuruh mencetak kalimat berulang-ulang?

      Misalnya:

      “Tolong tampilkan kalimat "Tutorial Javascript!" di website saya sebanyak 10 kali”

      Mungkin kita bisa menuliskannya dengan fungsi document.write() sebanyak 10 kali seperti ini:

      document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");
document.write("<p>Tutorial Javascript!</p>");

      Hasilnya:

      Menampilkan teks tanpa perulangan

      Apakah boleh seperti ini?

      Ya, boleh-boleh saja.

      Tapi…

      Bagaimana kalau nanti kita harus menampilkan sebanyak 1000 kali ? Pastinya cara diatas tidaklah efektif. Karena itu, kita harus menggunakan perulangan.

      Mari kita bahas.......

  • 26 May - 1 June

Contact

spada@kemdiktisaintek.go.id

Spada Indonesia

http://spada.kemdiktisaintek.go.id
LMS-SPADA INDONESIA LMS-SPADA INDONESIA

Copyright © 2025 Spada Indonesia. All Rights Reserved.