Teknologi Pengembangan Aplikasi Web
Alokasi waktu : 8 JP
Kompetensi Dasar :
3.1 Memahami konsep teknologi aplikasi web
4.1 Mempresentasikan pelbagai teknologi pengembangan
aplikasi web
Konsep world wide web (www)
WWW merupakan kumpulan server web 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.
Menurut MCLeod (Pearson) Www adalah informasi yang
dapat diakses melalui internet di mana berbagai dokumen
hypermedia/ file-file komputer disimpan dan kemudian
diambil dengan cara-cara yang menggunakan metode
penentuan alamat yang unik
Konsep teknologi aplikasi web
Aplikasi web adalah suatu aplikasi yang di akses menggunakan penjelajah web melalui suatu jaringan seperti internet atau intranet.
Aplikasi web juga merupakan suatu aplikasi perangkat lunak komputer yang
dikodekan dalam bahasa yang didukung oleh penjelajah web (seperti HTML, Java
Script, AJAX, Java, dan lain lain) tergantung pada web browser tersebut untuk
menampilkan aplikasi.
Berbagai teknologi aplikasi web
1. HTML (Hypertext Markup Language / Web Statis)
2. Javascript (membuat suatu website lebih interaktif dan lebih menarik) 3. AJAX (Asynchronous Javascript and XML)
4. PHP (PHP: Hypertext Preprocessor / Web Dinamis) 5. MySQL (software basis data server)
6. PHP MyAdmin (aplikasi untuk mengatur dan mengelola basis data MySQL)
7. XAMPP (paket perangkat lunak yang terdiri dari Apache Server,PHP,MySQL dan sejenisnya)
8. Wordpress merupakan CMS (Content Management System)
Penggunaan aplikasi berbasis web
1. Web Media Sosial
Sarana komunikasi dalam bentuk percakapan online. Contohnya adalah Facebook, Twitter, Instagram, dll 2. Web Berbasis Sistem Informasi
sarana membantu aktivitas usaha dan pekerjaan manusia. Contohnya adalah sistem informasi koperasi, SIAKAD (Sistem Informasi Akademik), Hospital Management, dan masih banyak lagi.
3. Web Jual Beli dan Bisnis
sarana transaksi jual beli secara online. Saat ini disebut dengan e-commerce. Contoh aplikasi yang banyak digunakan di Indonesia adalah Tokopedia, Shopee, Bukalapak, dan platform e-commerce lainnya.
4. Web Pencarian
Web pencarian biasa disebut dengan Search Engine. Contohnya seperti Google, Yahoo, Youtube, dll. Mesin pencari dapat melakukan berbagai pencarian informasi secara cepat dan akurat.
5. Web Informasi dan Berita
Sarana menampilkan informasi dan berita teraktual dan terkini dari seluruh dunia. Contoh web berita di Indonesia adalah Detik.com, Kompas.com, Tribunnews, dll.
Menjalankan aplikasi web menggunakan browser
Web browser merupakan aplikasi yang bisa menjelajahi, menyajikan, maupun mengambil konten yang ada di berbagai sumber informasi pada jaringan internet atau WWW. Pengertian dari web browser juga sering disebut dengan suatu perangkat lunak dengan fungsi yang dimilikinya sebagai penerima, pengakses, penyaji berbagai informasi di internet.
Berikut cara menjalankan aplikasi web menggunakan browser;
1. Buka salah satu browser (Google Chrome/Mozila Firefox/Internet Explorer)
2. Ketikan alamat website yang dituju pada kotak url, misalnyawww.google.comatau gurututorku.com 3. Tekan Enter lalu tunggu beberapa saat sampai
muncul halaman web tersebut.
Konsep aplikasi web server
Web Server adalah sebuah software yang berfungsi untuk menerima dan melayani permintaan yang dikirimkan user melalui browser kemudian ditampilkan kepada user sesuai dengan permintaan yang dikirimkan ke server.
Ilustrasi pertama
Ilustrasi kedua
Adapun Jenis-Jenis Web Server diantaranya;
1. Apache (Apache adalah layanan web server yang paling populer, Berdasarkansurvei W3Tech Top Ranks Web Serverdi bulan januari 2020) 2. NginX
3. Litespeed
Instalasi paket aplikasi web server
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.
Program aplikasi XAMPP berfungsi sebagai server lokal untuk mengampu berbagai jenis data website yang sedang dalam proses pengembangan.
Cara Install XAMPP di Laptop dan PC
1. Akses dan download software XAMPP di https://www.apachefriends.org/download.html 2. Klik hasil download xampp lalu ikuti instruksinya.
3. Setelah selesai install, klik apache control panel, lalu aktifkan Apache dan MySQL dengan cara klik tombol start sampai warna hijau
4. Buka Browser dan ketikan localhost/xampp untuk melihat versi xampp dan phpnya serta buka tab baru dan ketikan localhost/phpMyAdmin untuk mengakses database server.
1
2
3
4
Penggunaan web direktori dalam web server
HTDOCS merupakan tempat menyimpan file-file PHP dan HTML yang akan dijalankan. Nantinya ketika Anda mengakses alamat localhost pada browser, maka secara otomatis akan terpampang file-file yang tersimpan dalam HTDOCS ini.
Contoh kita buat folder dengan nama belajarweb di /xampp/htdocs, lalu buka folder tersebut dan buat file tes.html
Setelah itu buka browser dan ketikan localhost/belajarweb, maka akan muncul tampilan seperti disamping.
Adapun istilah lain dari website direktori khususnya di server online adalahmerupakan sebuah buku alamat dalam dunia maya World Wide Web dan merupakan kumpulan data yang tersusun ke dalam beragam kategori.
Biasanya Semakin banyak mendaftar dan diterima direktori berkualitas, maka berdampak besar pada SEO dan peningkatan SERP.
Macam-macam text editor
Text Editor adalah suatu software aplikasi atau suatu program komputer yang memungkinkan Anda sebagai penggunanya untuk membuat, mengubah atau mengedit file teks yang ada berupa plain text.
Text editor ini sebenarnya bisa digunakan untuk membuat program-program komputer dan mengedit source code dari bahasa pemograman. Selain itu, text editor juga bisa dimanfaatkan untuk membuat halaman web atau template web design dan juga membuat aplikasi tertentu.
Berikut beberapa software text editor yang bisa kalian download dan install;
1. Visual Studio Code 2. Sublime Text 3. Notepad++
4. Atom 5. Vim
Tools pengembang web
Menjadi seorang web developer merupakan salah satu pekerjaan yang membutuhkan beberapa komponen penunjang guna untuk menghasilkan pekerjaan yang dapat dicapai sesuai dengan tujuan awal serta membuat efisiensi dalam waktu pengerjaannya.
Salah satu komponen penunjang tersebut adalah beberapa tools yang nantinya dapat digunakan untuk melancarkan pembuatan aplikasi webnya adalah sebagai berikut;
Firebug / Inspect Elemen
salah satu tools debugging pada HTML, CSS dan Javascript di dalam browser.
HTML Entity Character Lookup
menuliskan symbol/karakter yang diinginkan tools ini akan menampilkan entitas HTML yang ada.
Lorem Ipsum
tools ini memberikan contoh teks yang diberikan pada sebuah halaman web.
Fontello / Fontawesome
tools ini akan mudah dalam memilih berbagai ikon pendukung.
cssgradient.io
tools ini akan mudah dalam mengambil kode css dalam bentuk gradient color
Kompetensi Abad 21 yang harus disiapkan
1. Pemecahan Masalah (Problem Solving)
2. Kreativitas (Creativity)
3. Berpikir Analitis/Kritis (Critical Thinking)
4. Berkolaborasi (Collaborative Learning)
5. Komunikasi (Communication Skill)
6. Etika & Akuntabilitas/Komitmen (Attitude and Accountability)
Praktikum / Latihan Kerja
Tugas Kelompok:
- Buat kelompok kerja yang terdiri dari 3-4 orang
- Diskusikan dan buat rangkuman tentang konsep teknologi pengembangan aplikasi web kedalam bentuk ppt.
Tugas Mandiri:
1. Buatlah Langkah-Langkah ketika melakukan install dan pengujian software XAMPP versi terbaru!
2. Install 2 jenis text editor dan tuliskan kelebihan serta kekurangannya!
3. Tools pengembangan apa yang anda sukai dan coba berikan alasannya!
4. Semua tugas ini dimasukan kedalam bentuk microsoft Word.
Daftar Pustaka
https://id.wikipedia.org/wiki/Waring_Wera_Wanua
https://indosmartschool.com/2020/11/22/materi-memahami-konsep-teknologi-aplikasi-web/
https://freddset.wordpress.com/2019/02/18/3-1-memahami-konsep-teknologi-aplikasi-web/
https://www.sekawanmedia.co.id/aplikasi-berbasis-web/
https://idcloudhost.com/apa-itu-web-browser-jenis-jenis-fungsi-manfaat-dan-cara-menggunakannya/
https://www.jagoanhosting.com/blog/pengertian-web-server/
https://qwords.com/blog/pengertian-xampp/
https://seon.co.id/apa-itu-website-direktori/
https://www.niagahoster.co.id/blog/text-editor-terbaik/
https://www.idntimes.com/life/career/noto/tools-yang-sangat-berguna-untuk-kalangan-web-developer-c1c2
