Materi Pembelajaran

Thursday, August 26, 2021

Modul Design & Pemrograman Web

 

HTML (Hypertext Markup Language)










   

Thursday, August 12, 2021

Dasar-Dasar HTML

 HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut.


Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.

  • Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.

  • Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.



  • Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.

  • Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.

  • Audio. Memungkinkan penyajian player untuk memutar suara.

  • Video. Memungkinkan player untuk memainkan film.



Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :


  • Struktur halaman ;

  • Presentasi visual ;

  • Peranti penyaji gambar ;

  • Pendukung media ; dan Peningkatan koneksi dengan JavaScript.

Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag

<contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut- atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut:

<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.


Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.

Struktur Dasar Dokumen HTML


Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :






Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag

<body>…</body>.


Bagian yang diapit oleh tag HEAD merupakan header  dari  halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi  untuk mengeluarkan judul pada tittle bar window web browser.

Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.



Monday, August 9, 2021

PERTEMUAN KE.3 . : Alur dan Perangkat Pengembangan Aplikasi Web

 

a.    Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 2 ini Peserta Didik diharapkan dapat :

1)    Memahami Alur Pengembangan Aplikasi Web

2)    Menyajikan Perangkat Pengembangan Aplikasi Web

 

b.    Uraian Materi

·         Alur Pengembangan Aplikasi Web

Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli dalam bidang rekayasa perangkat lunak (software engineering professional), Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak.

Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak, Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu, teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web.

Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari print publishing dan pengambangan perangkat lunak, diantara marketing dan perhitungan dan diantara seni dan teknologi.

Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :

 

 

Formulasi (formulation)

 

Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi berbasis web serta menentukan batasannya sistem.

 

Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu :

1.  Tujuan yang bersifat informatif


 

Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, audio, dan video.

 

2.  Tujuan yang bersifat fungsional

 

Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal dengan menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai akhir dan statistik nilai guru dari data-data ujian, tugas, kuis yang ia input ke dalam aplikasi.

 

Perencanaan (planning)

 

Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan jadwal pengembangan untuk versi selanjutnya (jika diperlukan).

 

Analisis (analysis)

 

Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang digunakan pada rekayasa web dilakukan dari empat sisi, yaitu :

 

1.  Analisis isi informasi

 

Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi informasi dapat berupa teks, grafik, audio, maupun video.

 

2.  Analisis interaksi

 

Analisis yang menunjukkan hubungan antara web dengan pengguna.

 

3.  Analisis fungsional

 

Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan informasi kepada pengguna.


 

 

4.  Analisis konfigurasi

 

Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau extranet. Selain itu, analisis ini juga meliputi relasi database dengan web jika diperlukan.

 

Rekayasa (engineering)

 

Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi dan desain arsitektur web.

 

Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :

 

Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram gambar rangka adalah untuk menunjukkan bagaimana lay out halaman web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak pencarian, elemen bentuk dan sebagainya, tanpa desain grafis

PERTEMUAN KE.2 Profesi dalam Pengembangan Aplikasi Web

 

a.    Tujuan Pembelajaran

Setelah mengikuti kegiatan belajar 1 ini Peserta Didik diharapkan dapat :

1)    Memahami profesi dalam bidang Teknologi Informasi

2)    Memahami profesi dalam pengembangan aplikasi web

3)    Memahami sejarah web

4)    Memahami cara kerja web

5)    Menyajikan cara kerja web

 

 

b.    Uraian Materi

1)    Profesi dalam bidang Teknologi Informasi

Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau TI. Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan segala aktifitas. Munculnya bidang TI yang baru juga memunculkan profesi di bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing.

Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat dikelompokan sesuai bidangnya, misalnya.

 

a.   Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak (software), baik mereka yang merancang sistem operasi, database maupun sistem aplikasi.

 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

*Sistem analis, merupakan orang yang bertugas menganalisa system yang akan diimplementasikan, mulai dari menganalisa system yang ada, kelebihan dan kekurangannya, sampai studi kelayakan dan desain system yang akan dikembangkan

*  Programer, merupakan orang yang bertugas mengimplementasikan rancangan system analis, yaitu membuat program ( baik aplikasi maupun system operasi ) sesuai system yang dianalisa sebelumnya.


 

*   Web designer, merupakan orang yang melakukan kegiatan perencanaan, termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan aplikasi berbasis web.

*   Web programmer, merupakan orang yang bertugas mengimplementasikan rancangan web designer, yaitu membuat program berbasis web sesuai desain yang telah dirancang sebelumnya.

 

b.   Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras (hardware).

 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

*  Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat system computer.

*   Networking engineer, adalah orang yang berkecimpung dalam bidang teknis jaringan computer dari maintenance sampai pada troubleshooting-nya.

 

c.   Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional system informasi.

 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

*EDP Operator, adalah orang yang bertugas mengoperasikan program-program yang berhubungan dengan electronic data processing dalam lingkungan sebuah perusahaan atau organisasi lainnya.

*System Administrator, merupakan orang yang bertugas melakukan administrasi terhadap system, memiliki kewenangan menggunakan hak akses terhadap system, serta hal-hal lain yang berhubungan dengan pengaturan operasional sebuah system.

2)    Profesi dalam pengembangan aplikasi web

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, bagaimana dengan profesi yang berada dalam lingkungan pengembangan aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam pengembangan aplikasi web, diantaranya :


 

 

Web Designer

Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan tampilan sebuah website. Tugasnya adalah pendisainan tampilan situs (web) mulai dari pengolahan gambar, tata letak, warna, dan semua aspek visual situs. Fokus utama mereka adalah tampilan / layout dari web. Mereka lebih konsen dengan bagaimana halaman terlihat dan apakah berfungsi sempurna ketika sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs seorang Web Designer harus menguasai :

-              HTML, DHTML

-              Pengolah Gambar

-              Animasi, Movie (Film)

 

 

Web Programmer

Web Programmer bertugas dalam melakukan pengcodingan atau pemograman sebuah website agar dinamis. dimana agar sebuah web tersebut dapat telihat mudah bagi seorang web admin.

Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan situs misalnya menyangkut dengan transaksi, input output data dan database maka seorang Web Programmer yang akan mengerjakannya dengan membuat aplikasi-aplikasi yang berkerja diatas situs (web). Penguasaan yang biasanya harus dikuasai pada umumnya oleh Web Programmer :

-  CGI Perl, PHP, MySQL (Unix base)

-  ASP (NT base)

-  Java Script dan Applet

 

 

Web Administrator

Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server, baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang Web Administrator harus menguasai :

-  OS Unix (LInux, FreeBSD, dll)

-  OS NT

-  Jaringan (LAN, WAN, Intranet)

-  Keamanan Server


 

Web Master

Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari disain, program dan keamanan server namun tidak terlalu turut mencampuri ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya suatu situs (web). Penguasaan yang harus dimiliki :

-  HTML, DHTML

-  CGI Perl, PHP, MySQL, ASP, Java

-  Penguasaan bermacam OS (Operating System)

-  Keamanan Server

-  Jaringan (LAN, WAN, Intranet)

 

 

Web Developer

Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan Web Developer.

Web developer memberi bantuan seperti konsultasi web, konsep web yang akan di buat, membangun sebuat website..

 

Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena tidak semua orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai sebuah profesi yaitu jika seseorang sudah ahli di dalam bidang pekerjaan tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai sebuah profesi adalah web designer, web programmer, web administrator, web master dan web developer karena dalam bidang tersebut seseorang memang sudah memiliki keahlian di dalamnya.

 

3)    Sejarah web

Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat dikirimkan antar komputer, termasuk email, transfer file (File Transfer Protocol), dan banyak layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai protokol.


 

 

World Wide Web, biasa lebih terkenal disingkat sebagai WWW adalah suatu ruang informasi yang dipakai oleh pengenal global yang disebut URL (Uniform Resource Locator) untuk mengenal pasti sumber daya berguna. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada Internet.

 

WWW merupakan kumpulan web server dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama. WWW adalah bagian yang paling menarik dari Internet. Melalui web, para pengguna dapat mengakses informasi-informasi yang tidak hanya berupa teks tetapi bisa juga berupa gambar, suara, video dan animasi.

 

Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang peladennya tersebar di lima benua termasuk Indonesia yang terhubung menjadi satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language).

 

Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman lewat teks ini disebut pranala. Dokumen infomasi ini tidak hanya terdiri dari teks tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan antar-dokumen yang seperti itu biasa disebut hipermedia.

 

Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik pranala (hyperlink), maka para pengguna bisa berpindah dari satu dokumen ke dokumen lainnya.

 

WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama


 

Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat yang dikenal sebagai WWW.