Pemrograman Web

Modul ke-1
M. Udin Harun Al Rasyid, S.Kom, Ph.D
http://udinharun.lecturer.pens.ac.id/
udinharun@pens.ac.id

http://udinharun.lecturer.pens.ac.id/ 1
http://udinharun.lecturer.pens.ac.id 2
 Rencana Pembelajaran Semester
Pekan Pembahasan

1 Modul 01 - Instalasi Web Server

2 Modul 02 - PHP: install, syntax, comments, variables, Echo/print, data types, strings

3 Modul 03 - PHP: numbers, Constants, Operators, if..else..elseif, Switch, Loops, Functions,

Arrays, Superglobals.

4 Modul 04 - PHP: Form, Form handling, Form validation, Form required, Form URL/E-mail,
Form Complete

5 Modul 05 - PHP: date and time, include, file handling, file open/read, file upload, cookies,
sessions, filters, filter advanced, PHP JSON.

6 Modul 06 - PHP: OOP, classes/Objects, constructor, destructor, access modifiers,

inheritance, constants, abstract classes, traits, static method, static properties.

7 Modul 07 - MySQL database: Connect, Create DB, Create table, Insert data, Get last ID,
Insert multiple, Prepared, Select data, Where, Order by, Delete data, Update data, Limit data.

8 - Ujian Tengah Semester (UTS)

- Presentasi Proposal Final Project Kuliah

http://udinharun.lecturer.pens.ac.id 3
 Rencana Pembelajaran Semester
Pekan Pembahasan
9 Modul 08 - PHP XML Parser: SimpleXML Parser, SimpleXML – Get,
XML Expat, XML DOM
10 AJAX PHP: AJAX database, AJAX XML, AJAX Live search, AJAX Poll
11 Login: Login using social media, Login using google account, Login
using FB account
12 Node JS: intro, modules, HTTP module, file system, URL module, NPM,
Events, upload files, email
13 Node JS MySQL: Get started, Create Db, Create table, Insert into,
Select from, Where, Order by, Delete, Drop table, Update, Limit, Join
14 Node JS MongoDB
15 Demo Final Project
16 - Ujian Akhir Semester (UAS)
- Demo Final Project

http://udinharun.lecturer.pens.ac.id 4
Capaian Pembelajaran

 Memahami konsep client server.

 Memahami arsitektur client server.
 Dapat melakukan instalasi web server.

http://udinharun.lecturer.pens.ac.id/ 5
Pokok Bahasan

 Konsep Client-Server
 Arsitektur Client Server
 Instalasi Web Server

http://udinharun.lecturer.pens.ac.id/ 6
Client Server Concept

 The client-server model is a distributed communication framework of

network processes among service requestors, clients and service
providers.

 The client-server connection is established through a network or the

Internet.

 The client-server model is a core network computing concept also

building functionality for email exchange and Web/database access.

http://udinharun.lecturer.pens.ac.id/ 7
https://creativemarket.com/SergeyVasutin/2855977-Client-Server-Model-Concept

http://udinharun.lecturer.pens.ac.id/ 8
 Web technologies and protocols built around the client-server model
are:
 Hypertext Transfer Protocol (HTTP)

 Domain Name System (DNS)

 Simple Mail Transfer Protocol (SMTP)

 Telnet

 Clients include Web browsers, chat applications, and email

software, among others. Servers include Web, database,
application, chat and email, etc.

http://udinharun.lecturer.pens.ac.id/ 9
 A server manages most processes and stores all data.

 A client requests specified data or processes.

 The server relays process output to the client.

 Clients sometimes handle processing, but require server data

resources for completion.

https://www.tutorialspoint.com/Client-Server-Computing

http://udinharun.lecturer.pens.ac.id/ 10
 The client-server model differs from a peer-to-peer (P2P) model
where communicating systems are the client or server, each with
equal status and responsibilities.

 The P2P model is decentralized networking. The client-server model

is centralized networking.

https://blog.peer5.com/the-p2p-witch-hunt/

http://udinharun.lecturer.pens.ac.id/ 11
 One client-server model drawback is having too many client
requests underrun a server and lead to improper functioning or total
shutdown.

 Hackers often use such tactics to terminate specific organizational

services through distributed denial-of-service (DDoS) attacks.

https://idcloudhost.com/mengenal-serangan-ddos-distributed-denial-of-service-attack/

http://udinharun.lecturer.pens.ac.id/ 12
Client Server Architecture

 Client Server Architecture is a computing model in which the

server hosts, delivers and manages most of the resources and
services to be consumed by the client.

 This type of architecture has one or more client computers

connected to a central server over a network or internet connection.
This system shares computing resources.

 Client/server architecture is also known as a networking

computing model or client/server network because all the requests
and services are delivered over a network

http://udinharun.lecturer.pens.ac.id/ 13
https://practice.geeksforgeeks.org/problems/explain-client-server-architecture

http://udinharun.lecturer.pens.ac.id/ 14
Characteristics of a Client-Server Architecture
 Client and server machines need different amount of hardware
and software resources.
 Client and server machines may belong to different vendors.

 Horizzontal scalability (increase of the client machines) and

vertical scalability (migration to a more powerful server or to a
multiserver solution)
 A client or server application interacts directly with a transport

layer protocol to establish communication and to send or receive

information.
 The transport protocol then uses lower layer protocols to send or
receive individual messages. Thus, a computer needs a complete
stack of protocols to run either a client or a server.
 A single server-class computer can offer multiple services at the
same time; a separate server program is needed for each
service.

http://udinharun.lecturer.pens.ac.id/ 15
Three-tier Client Server Architecture
 The traditional client/server architecture involves two levels, a client
level and a server level. Another common design of client/server
systems uses three tiers:
 A client that interacts with the user

 An application server that contains the business logic of the

application
 A resource manager that stores data

https://cio-wiki.org/wiki/File:ClientServerArchitecture.png

http://udinharun.lecturer.pens.ac.id/ 16
Web Server Installation

http://udinharun.lecturer.pens.ac.id/ 17
XAMPP

 Xampp adalah perangkat yang

menggabungkan tiga aplikasi kedalam
satu paket, yaitu Apache, MySQL, dan
PHPMyAdmin. Dengan Xampp pekerjaan
anda sangat dimudahkan karena dapat
menginstalasi dan mengkonfigurasi ketiga
aplikasi tersebut dengan sekaligus dan
otomatis.

http://udinharun.lecturer.pens.ac.id/ 18
Cara Installasi XAMPP
 Jika ingin melakukan installasi yang versi 1.8.3, dapat mengunduh instaler XAMPP
versi tersebut dengan mengunjungi url download dibawah ini.
http://www.filehorse.com/download-xampp/16688/
Atau anda ingin men-download yang versi terbaru dengan mengunjungi url halaman:
https://www.apachefriends.org/download.html

 Jika sudah mengunduh installer Xampp, maka klik 2x pada installer tersebut. Untuk
pengguna Windows 7, Anda akan melihat jendela pop up, peringatan tentang User
Account Control (UAC) yang aktif pada sistem. Klik “OK” untuk melanjutkan instalasi.

http://udinharun.lecturer.pens.ac.id/ 19
Installasi XAMPP

 Selanjutnya klik Next.

http://udinharun.lecturer.pens.ac.id/ 20
Installasi XAMPP

 Di sini, dapat memilih komponen yang ingin diinstal. klik Next.

http://udinharun.lecturer.pens.ac.id/ 21
Installasi XAMPP

 Pilih folder sebagai tempat XAMPP akan diinstal, di folder ini akan
menampung semua file aplikasi web, jadi pastikan untuk memilih
drive yang memiliki banyak ruang(space). Klik Next.

http://udinharun.lecturer.pens.ac.id/ 22
Installasi XAMPP

 Layar berikutnya adalah promo untuk BitNami, sebuah toko aplikasi

untuk server perangkat lunak. Pada kotak centang ‘Learn more
about BitNami for XAMPP’, bisa dicentang atau dihapus saja. Klik
Next.

http://udinharun.lecturer.pens.ac.id/ 23
Installasi XAMPP

 Sekarang Setup sudah siap untuk menginstall XAMPP. Klik Next

dan tunggu installer untuk membongkar paket-nya dan memasang
komponen yang dipilih. Mungkin memakan waktu beberapa menit.
Nanti mungkin akan diminta untuk menyetujui akses Firewall untuk
komponen tertentu (seperti Apache) selama proses instalasi.

http://udinharun.lecturer.pens.ac.id/ 24
Installasi XAMPP

 Proses Install sudah selesai! Pilih Kotak centang ‘Do you want to
start the Control Panel now?’ untuk membuka kontrol panel XAMPP.

http://udinharun.lecturer.pens.ac.id/ 25
Testing Apache

 Di control panel XAMPP, klik tombol ‘Start’ di bawah tulisan ‘Actions’

untuk modul Apache. Hal ini menginstruksikan XAMPP untuk
memulai web server Apache.

http://udinharun.lecturer.pens.ac.id/ 26
Testing Apache

 Buka browser web dan pada address bar ketik: http://localhost atau
http://127.0.0.1

http://udinharun.lecturer.pens.ac.id/ 27
Testing Apache

 Selanjutnya akan muncul halaman seperti gambar dibawah. Pilih

bahasa dari halaman tersebut.

http://udinharun.lecturer.pens.ac.id/ 28
Testing Apache

 Selanjutnya akan melihat layar seperti gambar dibawah. Ini berarti

telah berhasil menginstall XAMPP dan web server Apache di
komputer.

http://udinharun.lecturer.pens.ac.id/ 29
Testing Apache

 Di control panel XAMPP, klik tombol ‘Start’ di bawah tulisan ‘Actions’

untuk modul Apache. Hal ini menginstruksikan XAMPP untuk
memulai web server Apache.

http://udinharun.lecturer.pens.ac.id/ 30
Testing Apache

 Masuk ke dalam folder installasi, kemudian masuk ke dalam folder

htdocs (Misalnya : c:\ xampp\htdocs\), lalu buat folder dan berikan
nama folder tersebut. (Misalnya : test-php).

http://udinharun.lecturer.pens.ac.id/ 31
Testing Apache

 Buka Aplikasi Notepad atau text editor lainnya seperti Notepad++,

Sublime, atau Atom. Kemudian ketik seperti gambar di bawah ke
dalam dokumen baru Notepad.

http://udinharun.lecturer.pens.ac.id/ 32
Testing Apache

 Simpan dokumen baru tersebut di folder yang telah dibuat

sebelumnya. (Misalnya : c:\ xampp\htdocs\test-php\). Pada saat
akan menyimpan file tersebut, di bagian “Save as type” pilih yang
“All Files”, kemudian simpan sebagai ‘index.php’ pada bagian “File
name”.

http://udinharun.lecturer.pens.ac.id/ 33
Testing Apache

 Arahkan halaman browser ke http://localhost/test-php/. Jika berhasil

dalam halaman browser akan menampilkan halaman seperti
gambar dibawah, yaitu halaman yang berisi tentang informasi PHP
yang telah diinstall.

http://udinharun.lecturer.pens.ac.id/ 34
Testing MySQL

 Di control panel XAMPP, klik tombol ‘Start’ di bawah tulisan ‘Actions’

untuk modul Apache dan MySQL. Hal ini menginstruksikan XAMPP
untuk memulai web server Apache dan MySQL.

http://udinharun.lecturer.pens.ac.id/ 35
Testing MySQL

 Arahkan halaman browser ke http://localhost/phpmyadmin.

Kemudian tekan Enter.

http://udinharun.lecturer.pens.ac.id/ 36
Testing MySQL

 Jika berhasil dalam halaman browser akan menampilkan halaman

seperti gambar dibawah, yaitu halaman PhpMyAdmin.

http://udinharun.lecturer.pens.ac.id/ 37
PhpMyAdmin

 PhpMyAdmin adalah perangkat lunak bebas yang ditulis dalam

bahasa pemrograman PHP yang digunakan untuk menangani
administrasi MySQL menggunakan browser. PhpMyAdmin
mendukung berbagai operasi MySQL, diantaranya (mengelola basis
data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna
(users), perizinan (permissions), dan lain-lain).

http://udinharun.lecturer.pens.ac.id/ 38
Tugas 01 Praktikum
 Lakukan instalasi XAMPP di PC/Laptop masing-masing.
Referensi: https://www.rumahweb.com/journal/install-xampp-di-windows/
 Pelajari cara membuat database MySQL di XAMPP.
Referensi: https://www.rumahweb.com/journal/membuat-database-di-
xampp/
 Selanjutnya Jelaskan proses instalasi XAMPP dan pembuatan ‘user,
database, table’ MySQL di XAMPP bentuk video maksimal 30 menit.
 Upload Video di Google Drive
 Upload link google drive di ETHOL (pastikan link google drive sudah di-
share )

http://udinharun.lecturer.pens.ac.id/ 39
NEXT

“Modul ke-02: PHP Programming”

http://udinharun.lecturer.pens.ac.id/ 40
References

 https://www.techopedia.com/definition/18321/client-server-model
 https://techterms.com/definition/client-server_model
 https://cio-wiki.org/wiki/Client_Server_Architecture
 https://bahasaweb.com/cara-install-xampp-windows/

http://udinharun.lecturer.pens.ac.id/ 41
IKLAN STRATEGI BELAJAR DAN
SUKSES MENJADI MAHASISWA

http://udinharun.lecturer.pens.ac.id 42
Strategi Belajar  Cek jaringan, kuota,
PC/Laptop/smartphone
Online dan
 Membaca dan melihat konten materi dari
Komunikasi yang dosen sebelum pembelajaran dimulai.
Efektif  Hadir tepat waktu sesuai jam kuliah.
 Ijin ke dosen jika datang terlambat kuliah
atau ada kendala.
 Catat hal-hal yang tidak dimengerti dan
tanyakan saat kuliah online sinkron.
 Proaktif dalam forum diskusi secara
langsung maupun tidak langsung.
 Kerjakan semua tugas tepat waktu.
 Jangan sampai tidak mengerjakan tugas.
 Pastikan tugas sudah sukses diunggah
secara online.
  Berkomunikasi dengan dosen sesuai etika. Perhatikan
Strategi Belajar pemakaian kosakata yang baik, waktu, tempat, alat
komunikasi.
Online dan  Diskusi dengan teman/kakak kelas berkaitan dengan
Komunikasi yang tugas dan materi.
 Buat forum diskusi online dengan teman seangkatan.
Efektif  Ikuti forum komunitas IT di kampus maupun luar kampus.
 Ikuti forum BEM/HIMA/UKKI
 Aktif dalam kompetisi lomba mahasiswa.
 Menambah pengetahuan dari luar kampus secara online:
 edX
 Coursera
 udemy
 Khan Academy
 MIT Opencourseware
 W3schools
 Youtube
 etc
  Siapkan mentalmu dahulu
 Atur jadwalmu dengan sebaik mungkin
 Lengkapi alat-alat yang menunjang
perkuliahan
 Pasang target IPK
 Belajar dengan fokus dan kerja keras
 Review materi kuliah
 Dekat dengan dosen
Tips Sukses  Asah skill
Menjadi Mahasiswa  Jalin jaringan yang luas
 Berorganisasi
 Berdoa kepada Allah SWT dan
meminta doa restu dari kedua orangtua