Website & Database
Johannes Sianipar
5 Mei 2021
Outline
■ Internet
■ Websites
□ HTML
□ CSS
□ Javascript
□ PHP
■ Database
□ mySQL
Website &
Database
Chart 2
Internet
https://theconversation.com/how-the-internet-was-born-from-the-arpanet-to-the-internet-68072 Website &
Database
Chart 3
Internet (Cont.) Website &
Database
■ Koneksi
□ Fiber Optik Chart 4
□ Satelit (VSAT)
□ Gelombang Radio (wifi, GSM)
□ dll
■ Provider
□ Perusahaan Telekomunikasi seluruh negara di dunia
■ Services (Layanan)
□ Web
□ FTP
□ Messengger
□ dll.
World Wide Web (WWW)
■ Sebuah layanan di Internet
■ WWW terdiri atas sekumpulan besar dokumen yang disimpan pada komputer-
komputer di seluruh dunia, yang saling terhubung melalui hyperlinks dan
URLs
□ Hyperlinks
– Sebuah text atau gambar yang ketika di click akan membawa pada
dokumen lain atau section lain pada dokumen yang sama.
□ URL (Uniform Resource Locator)
– Sebuah alamat yang merujuk pada resource yang tersedia di web.
– URL memiliki informasi tentang lokasi dari komputer dimana resource
berada dan cara mengakses resource tersebut.
– Contoh:
Website &
Database
Chart 5
World Wide Web (WWW)
■ Client-Server
□ Server: penyedia layanan web. Selalu dalam kondisi online dan siap
menerima request dari client.
□ Client: pengguna layanan yang disediakan server. Pada layanan web,
client berupa web browser
Website &
Database
Chart 6
Protocol (HTTP) Website &
Database
■ Hyper Text Transfer Protocol
■ TCP/IP Stack Chart 7
https://www.oreilly.com/
Domain Name System (DNS)
■ Melakukan pemetaan nama domain ke IP Address
https://www.geeksforgeeks.org/working-of-domain-name-system-dns-server/ Website &
Database
Chart 8
Web Site Development
■ Komponen-komponen dari sebuah Web site:
□ HTML
□ Javascript
□ CSS
□ PHP
□ Web Server atau web engine
□ Database
Website &
Database
Chart 9
Tipe Web Site
■ Static
□ Sebuah website dimana halaman-halaman web (web pages) yang ada
didalamnya tetap (statis) atau tidak berubah-ubah.
□ Dibuat menggunakan HTML dan menampilkan informasi yang sama
pada semua pengunjung.
□ Contoh: web company profile perusahaan
□ Framework untuk membangun website statis
– https://jekyllrb.com/
– https://gohugo.io/
Website &
Database
Chart 10
Tipe Web Site (Cont.)
■ Dynamic Website &
Database
□ Halaman web di buat secara real-time. Halaman ini meliputi kode web
scripting seperti PHP dan ASP. Script ini akan dieksekusi ketika halaman Chart 11
web diakses, hasil eksekusi berupa HTML dikirimkan ke Web Browser.
□ Contoh: website berita
■ Interactive
□ Website memiliki interaksi antara pengguna dan isi dari website.
Dengan adanya interaksi ini, pengunjung memiliki pengalaman pribadi
dibanding hanya browsing website.
□ Contoh:
– Web forum, blog, game
– https://www.webstarts.com/
– dll.
Web Server (Web Engine)
■ Sebuah perangkat lunak yang menjalankan websites agar dapat
menyimpan, memproses dan mengirimkan halaman-halaman web.
■ Contoh:
□ Apache http
□ Apache tomcat
□ Nginx
□ Microsoft IIS
□ dll.
Website &
Database
Chart 12
HTML (Hyper Text Markup Language) Website &
Database
■ The standard markup language for creating Web pages
■ Menentukan struktur dari sebuah halaman web dan bagaimana halaman Chart 13
tersebut ditampilkan di browser.
■ Terdiri dari berbagai elemen seperti: text, gambar, video, dll.
■ Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
CSS (Cascading Style Sheets)
■ Aturan untuk mengatur beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam
□ layout, colors, and fonts.
■ Dapat mengatur layout dari banyak halaman sekaligus dengan satu file
css
■ External stylesheets are stored in CSS files
Website &
Database
Chart 14
CSS (Cascading Style Sheets)
<!DOCTYPE html> <body>
<html>
<head> <h1>My First CSS Example</h1>
<style> <p>This is a paragraph.</p>
body {
</body>
background-color: lightblue; </html>
}
h1 { Website &
Database
color: white;
text-align: center; Chart 15
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
Javascript Website &
Database
■ Bahasa pemrograman pada web yang berjalan pada sisi client atau
browser. Chart 16
■ Merupakan Just-in-time compiled
■ Menyediakan kemampuan komputasi logika di sisi client
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
PHP
■ A server scripting language, and a powerful tool for making dynamic and Website &
interactive Web pages. Database
■ Di eksekusi di web server
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
■ Simpan file sebagai .php di server Chart 17
Database Website &
Database
■ Sekumpulan informasi yang diatur sedemikian rupa sehingga dapat
dengan mudah di akses, dikelola dan diperbaharui.
■ Database management system (DBMS)
□ Sistem perangkat lunak untuk mendefinisikan, membuat, memelihara
dan mengendalikan akses ke database.
□ Contoh DBMS: MySQL, PostgreSQL, Oracle, MS SQL, dll.
■ SQL (Structured Query Language)
□ Bahasa standar yang digunakan untuk menyimpan, memanipulasi dan
mengambil data dari databases.
□ Contoh query: SELECT * FROM Customers;
– Jalankan di https://www.w3schools.com/sql/default.asp
Chart 18
Development Tools Website &
Database
■ WYSIWYG
□ Adobe Dreamweaver Chart 19
(https://www.adobe.com/sea/products/dreamweaver.html)
□ Amaya (https://www.w3.org/Amaya/)
□ OpenBEXI (https://github.com/arcazj/openbexi)
■ Editor
□ Vscode
□ Sublime
□ Atom
□ Jetbrains
□ Notepad++
□ dll.
Development Tools Website &
Database
■ CMS (Content Management System)
□ https://wordpress.org Chart 20
□ https://www.joomla.org/
□ https://www.drupal.org/
□ dll.
■ Web builder
□ https://wordpress.com/
□ https://www.weebly.com/?lang=en
□ https://www.hostinger.co.id/
□ dll.
Local Web and Database Engine
■ XAMPP
□ https://www.apachefriends.org/download.html
■ Web server config file:
□ D:\xampp\apache\conf\httpd.conf
■ Document root
□ D:\xampp\htdocs\
Website &
Database
Chart 21
Web Hosting Website &
Database
■ Web hosting
□ https://www.jimdo.com/ Chart 22
□ https://www.000webhost.com/
□ https://www.weebly.com/?lang=en
□ dll.
■ Web panel
□ Centos Web panel
□ Hostinger web panel
□ Weebly web panel
□ dll.
Web for Learning
■ HTML, CSS, Javascript, PHP, SQL
□ https://www.w3schools.com
Website &
Database
Chart 23
Thank you
for your attention!
Johannes Sianipar
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Data_Website
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Data_Website
- 1 - 24
Pages: