PEMROGRAMAN WEB

Anggota kelompok

1. Mukhammad Drajat Ma’ruf (22539144025)

2. Asnanda Afifah Nur (22539144037)
3. M. Zhaki Aditya P.
Table of contents
01 02 03
Perngertian Jenis Pemrograman Komponen Web
Pemrogaman Web Web

04 05 06
Aplikasi Istilah pada
Pemrograman Web Pemrograman Web
Pengertian
Pemrograman web adalah proses pembuatan instruksi-
instruksi untuk menciptakan program/aplikasi berbasis
internet yang dapat diakses melalui browser. Contoh
dari pemrograman web itu: gmail, facebook, tumbrl,
dll.
 JENIS PEMROGRAMAN WEB

Pemrograman web terbagi menjadi 2 yaitu:

1. Client side scripting

2. Server side scripting
 Client side scripting
• Client side scripting adalah program web yang pengoperasiannya dijalankan
melalui sebuah web browser di sisi penggunanya. Ketika pengguna meminta
informasu melalui sebuah web server, maka server akan menyediakan data
berupa script yang kemudian diunduh oleh web browser.
• Proses pengolahan client side scripting dilakukan oleh web browser sebagai
clientnya.
• Di dalam web browser terdapat library (sebagai web engine) yang mampu
menerjemahkan semua perintah di halaman web yang menggunakan client side
scripting.
Kelebihan Client side scripting

1. Mudah dipelajari dan digunakan.

2. Mudah digunakan oleh orang awam.
3. Perubahan dan pemrosesan kode programnya lebih cepat.
4. Layout dan design halaman webnya user friendly lebih
interaktif.

Kelemahan Client side scripting

1. Fitur pengaksesan ke sumber daya computer sangat

minim.
2. Kode programnya bisa dilihat melalui browser.
3. Masalah kompatibilitas web browser.
 Server side scripting
• Server side scripting adalah Bahasa pemograman web yang diterjemahkan
atau pengolahannya dilakukan di sisi server (web server dan komponen web
engine telah diintegrasikan).
• Server side scripting itu sama dengan HTML, embeded yang artinya semua
server side scripting dapat disisipkan menggunakan HTML ke dokumen web
atau sebaliknya.
• Contohnya ASP (Active Server Pages), PHP (Hypertext Preprocessor), CSP
(Java Server Pages).
Kelebihan Server side scripting

1. Dapat dijalankan di semua system operasi computer.

2. Mampu mengelola sumber daya yang ada di computer baik
perangkat keras maupun perangkat lunak lainnya.
3. Pemrosesan lebih cepat karena biasanya spesifikasi hardware
untuk mesin server lebih tinggi,
4. Meminimalkan traffic dijaringan.

Kelemahan Server side scripting

1. Kurang dalam pembuatan desain web yang menarik.

2. Programya sulit dilakukan oleh orang awam.
3. Membutuhkan spesifikasi computer yang cukup
tinggi.
 Komponen Website

1. Domain merupakan alamat dari sebuah website misalkan

musicstore.com, sudusoftware.com dan lain sebagainya, domain
bersifat unik yang artinya tidak akan ada nama domain yang sama di
seluruh dunia.
2. Header terleltak pada bagian paling atas yang biasanya digunakan
untuk meletakkan logo, menu dan identitas utama dari website.
3. Menu merupakan bagian dari website yang berisi link-link utama
yang mengarah pada halaman lain. Dari gambar di atas terdapat
beberapa menu: Home, Music, Genre, Logout, Your Chart dan Your
Account.
4. Body (Konten Utama) letaknya berada di tengah yang berisi
informasi utama dari halaman website.
5. Sidebar terletak di sisi kana atau kiri yang digunakan untuk
menampilkan informasi tambahan berupa link
6. Footer terletak di bagian paling bawah website yang biasanya berisi
informasi hak cipta pemilik website, link media sosial dan menu-
menu yang bersifat informasional.
Tools pada aplikasi pemrograman web

1. Text editor
Contohnya: Notepad sublime text dan VS Code

2. Web browser
Contohnya: Google chrome dan Mozila Firefox

3. Web server
Contohnya: Apache
Istilah pada Pemrograman Web

1. HTTP (Hyper Teks Transfer Protocol): digunakan untuk

mengatur komunikasi antara server dan klien.

2. Server: layanan yang digunakan oleh klien.

3. Klien: computer yang dapat menggunakan semua sumberdaya

yang tersedia di jaringan.

4. Hosting: tempat penyimpanan data di situs web.

5. Domain: alamat situs web seperti .com; .org; dan .net.

6. URL (Uniform Resource Locator): susunan huruf (angka, huruf,

dan simbol) yang digunakan untuk menunjukan alamat di internet.
Daftar Pustaka

https://idmetafora.com/news/read/806/Mengenal-Pengertian-Dan-T
ips-Belajar-Pemrograman-Web.html

https://sudusoftware.com/elemen-dan-komponen-website/

http://staff.uny.ac.id/sites/default/files/pendidikan/nuryake-
fajaryati-spdt-mpd/pengantar-web.pdf
Current situation & problems statement
Current situation
Jupiter is a gas giant and the biggest planet in the Solar System. It's the fourth-brightest object in the
night sky. It was named after the Roman god of the skies and lightning

01 02 03
Purposes Hypothesis Objectives
You can describe the topic of You can describe the topic of You can describe the topic of
the section here the section here the section here

Problems
Hypothesis

01
Hypothesis 1
Mercury is the closest planet to
02
the Sun and the smallest one in
the Solar System—it’s only a bit Hypothesis 2
larger than the Moon
Venus has a beautiful name and is
the second planet from the Sun.
It’s hot and has a poisonous
atmosphere
Study objectives

Mercury
It’s the closest planet to the
Sun and the smallest in the
Solar System
Venus
Venus has a beautiful name
and is the second planet from
the Sun
Mars
Despite being red, Mars is
actually a cold place. It’s full
of iron oxide dust
Literature review
AUTHOR (YEAR). Title of the publication. Publisher
○ Mercury is the closest planet to the Sun and the smallest one in the Solar System
AUTHOR (YEAR). Title of the publication. Publisher
○ Mars is full of iron oxide dust, which gives the planet its reddish cast
AUTHOR (YEAR). Title of the publication. Publisher
○ Jupiter is a gas giant and the biggest planet in the Solar System
AUTHOR (YEAR). Title of the publication. Publisher
○ Venus has a beautiful name and is the second planet from the Sun
AUTHOR (YEAR). Title of the publication. Publisher
○ Earth is the third planet from the Sun and harbors life
AUTHOR (YEAR). Title of the publication. Publisher
○ The Sun is the star at the center of the Solar System
Theoretical framework
Theoretical framework Our
framework
Key terms Relevant theories Venus has a beautiful
name and is the second
● Mercury is small Theory 1 planet from the Sun. It’s
● Earth harbors life
Saturn is a gas giant and has hot and has a poisonous
● Jupiter is quite big
rings. It’s composed mostly of atmosphere
hydrogen and helium

Theory 2
Neptune is the fourth-largest
planet by diameter in the Solar
System
Schedule
Task 1: Neptune is far away from the Earth

Task 2: Mercury is the smallest planet

Task 3: Saturn is a gas giant

Jan Feb Mar Apr May Jun

Task Description Date Status

Task 1 Mars is a very cold place Jan 1 - Mar 15 Completed

Task 2 Earth is where we all live Feb 1 - Apr 30 In progress

Task 3 Venus has a beautiful name May 15 - Jun 30 Delayed

Methodology
Mercury is the closest planet to the Sun and the
Type of data smallest in the Solar System

Venus has a beautiful name and is the second

Motives planet from the Sun

Despite being red, Mars is actually a cold place.

Data collection It’s full of iron oxide dust

Saturn is a gas giant and has several rings. It's

Specific sampling composed mostly of hydrogen and helium
Awesome words
Analysis & development
Phase 01
● Mercury is the closest planet to the Sun and
the smallest one in the Solar System
● Jupiter is a gas giant, the biggest planet in the
Solar System and the fourth-brightest object in
the night sky
● Neptune is the farthest planet from the Sun. It's
also the fourth-largest planet by diameter in
the Solar System
Phase 02
● Venus has a beautiful name and is the second
planet from the Sun. It’s terribly hot—even
hotter than Mercury
● Saturn is a gas giant and has several rings.
This planet is composed mostly of hydrogen
and helium
● Earth is the third planet from the Sun and the
only one that harbors life in the Solar System.
This is where we all live
A picture is worth a thousand words
Discussion
Mars
Despite being red, Mars is actually a cold place. It's full of
Discussion 1
iron oxide dust, which gives the planet its reddish cast. Mercury is the closest planet
Earth is the third planet from the Sun and the only one that to the Sun and the smallest of
harbors life in the Solar System. This is where we all live them all
on:
● Ceres is located in the main asteroid belt
● The Moon is Earth’s natural satellite Discussion 2
● Neptune is very far away from us Venus has a beautiful name
and is the second planet from
● Pluto now considered a dwarf planet the Sun
A picture always reinforces the concept
Images reveal large amounts of data, so remember: use an image instead of a
long text. Your audience will appreciate it
Conclusions

Venus Mercury
Venus has a very beautiful name Mercury is the closest planet to
and is the second planet from the the Sun and the smallest one in
Sun the Solar System

Mars Neptune
Despite being red, Mars is Neptune is the fourth-largest
actually a cold place. It’s full of object by diameter in the Solar
iron oxide dust System
Bibliographical references

Do you know what helps you make your point clear?

Lists like this one:

● They’re simple
● You can organize your ideas clearly
● You’ll never forget to buy milk!

And the most important thing: the audience won’t miss the
point of your presentation
9h 55m 23s
Jupiter's rotation period

333,000
The Sun’s mass compared to Earth’s

386,000 km
Distance between Earth and the Moon
Countries involved

Venus
Venus is the second
planet from the Sun

Jupiter
It’s the biggest planet in
the Solar System

Mars
Despite being red, Mars
is a cold place
Timeline

01 02 03 04
Venus Jupiter Mars Saturn
Venus is the second It’s the biggest planet in Despite being red, Mars Saturn is a gas giant
planet from the Sun the Solar System is a cold place and has several rings
150,000
Big numbers catch your audience’s attention
Tips to avoid digital espionage

Tip 01 Tip 02 Tip 03

Mercury is the closest Venus is the second planet Mars is actually a very
planet to the Sun from the Sun cold place

Tip 04 Tip 05 Tip 06

Jupiter is the biggest planet Saturn is the only planet Neptune is very far from
of them all with rings the Sun
Tablet mockup
You can replace the image on the
screen with your own work. Just
right-click on it and select “Replace
image”
Thanks!
Do you have any questions?
youremail@freepik.com
+91 620 421 838
yourwebsite.com

CREDITS: This presentation template was created by Slidesgo, including

icons by Flaticon and infographics & images by Freepik

Please keep this slide for attribution

Icon pack
Alternative resources
Here’s an assortment of alternative resources whose style fits the one of this template:

Vectors:
● Cyberbrain isometric illustration
Resources
Did you like the resources on this template? Get them for free at our other websites:

Photos:
● Medium shot man holding device
● Medium shot man typing on laptop
Vectors:
● Cyber insurance horizontal banner
● Cyber attack isometric icon with hacker and laptop 3d illustration
● Cyberbrain isometric illustration
● Cyber security isometric icon with binary code in characters head 3d illustration
● Cyber attack concept icon with human head with gears and wires 3d illustration
Icons:
● Cyber Crimes
 Instructions for use
If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please
refer to the next slide to read the instructions for premium users.

As a Free user, you are allowed to:

- Modify this template.
- Use it for both personal and commercial projects.

You are not allowed to:

- Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
- Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
- Include Slidesgo Content in an online or offline database or file.
- Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
- Acquire the copyright of Slidesgo Content.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Instructions for use (premium users)
As a Premium user, you can use this template without attributing Slidesgo or keeping the "Thanks" slide.

You are allowed to:

● Modify this template.
● Use it for both personal and commercial purposes.
● Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
● Share this template in an editable format with people who are not part of your team.

You are not allowed to:

● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.

For more information about editing slides, please read our FAQs or visit Slidesgo School:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
 Fonts & colors used

This presentation has been made using the following fonts:

Fira Sans
(https://fonts.google.com/specimen/Fira+Sans)

Roboto
(https://fonts.google.com/specimen/Roboto)

#1e1b1c #f4eee9 #c92727

#e97c7c #ffa6a6 #ffcbcb

 Storyset

Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick
the background and layers you want to show and bring them to life with the animator panel! It will boost
your presentation. Check out How it works.

Pana Amico Bro Rafiki Cuate

 Use our editable graphic resources...

You can easily resize these resources without losing quality. To change the color, just ungroup the resource
and click on the object you want to change. Then, click on the paint bucket and select the color you want.
Group the resource again when you’re done. You can also look for more infographics on Slidesgo.
 JANUARY FEBRUARY MARCH APRIL MAY JUNE

PHASE 1

Task 1

Task 2

PHASE 2

Task 1

Task 2

JANUARY FEBRUARY MARCH APRIL

PHASE
1

Task 1

Task 2
 ...and our sets of editable icons

You can resize these icons without losing quality.

You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.
Educational Icons Medical Icons
Business Icons Teamwork Icons
Help & Support Icons Avatar Icons
Creative Process Icons Performing Arts Icons
Nature Icons
SEO & Marketing Icons