Fakultas Ilmu Komputer

Learning is the process of acquiring new

understanding, knowledge, behaviors, skills,
values, attitudes, and preferences.

Server Side Programming Languages

(PHP, Python, Ruby, etc.)
 Welcome to the

DevOps Engineering Course

1 - Back-end Web Development
Untuk mencari error atau bug hampir sama
seperti mencari kutu adalah perumpamaan
yang cukup umum digunakan dalam dunia
pemrograman.

Perumpamaan ini menggambarkan

bagaimana mencari kesalahan atau bug dalam
kode program bisa menjadi tugas yang sulit
dan menyita waktu, mirip dengan mencari
kutu dalam rambut atau pakaian.

Dalam pemrograman, "bug" mengacu pada

kesalahan atau ketidaksesuaian dalam kode
yang menyebabkan program tidak berfungsi
sesuai yang diharapkan.

Menemukan dan memperbaiki bug bisa

menjadi tantangan, terutama dalam proyek-
proyek perangkat lunak yang kompleks.
 Jenis-Jenis Web Development

FRONT-END WEB DEVELOPMENT

Tugas utama:
 Para developer pada bagian ini bertugas untuk membangun UI yang dapat membantu
pengguna (users) untuk mencapai tujuan mereka di dalam situs.
 Front-end web developer juga sering ikut dalam aspek perancangan User
Experience (UX) dalam project.
 Memiliki background di bidang UX dapat menjadi nilai plus bagi seorang front-end
developer.

BACK-END WEB DEVELOPMENT

Tugas utama:
 Back-end developer bertugas untuk mengelola server situs web, program
(database), dan software, dengan tujuan agar semua fitur tersebut dapat bekerja
dengan baik.
 Back-end developer bekerja dalam sistem seperti server, sistem operasi, API,
dan basis data.
 Bertugas untuk mengelola code dalam situs untuk keperluan keamanan, konten,
dan struktur situs.
 Skills & Tools Required for Back-End

Server Application Database

In order to make the server, application and database communicate

with each other, back-end developers use server-side languages like
PHP, Ruby, Python, Java and .Net to build an application and tools
like MySQL, Oracle and SQL Server to find, save or change data and serve it
back to the user in front-end code.
What is MVC framework?
Framework MVC
Seorang DevOps Engineer harus terbiasa
dengan banyak jenis programming
languages, tools dan juga frameworks.
Bagaimana cara agar bisa tahu dan
mengerti banyak bahasa pemrograman
dan juga frameworks? Apakah ini
membutuhkan banyak waktu juga di
pelajari satu per satu?
2 - Server-side Scripting Languages
 What is Server-side Scripting?

If we want to :
1) We wan to view a webpage.
2) The browser sends a request
to the webserver.
3) The server validates and
processes the request.
4) The server sends the content
of the page back.

 Server-side scripting is a programming language that runs on the

webserver.

 Server-side scripting is also called “backend” programming because it

happens behind the scenes on the backend of the website.
 Server-side Script vs Client-side Script

Client-side scripting Server-side scripting is a

(front-end) is executed programming language that
directly in the browser. runs on the web server.
Frameworks like Angular,
Server-side scripting is also
Vue, and React fall into this
called “back-end”
category.
programming because it
The client script will happens behind the scenes on
communicate with the server the backend of the website.
through APIs, but the user
interface processing is done in
the browser.
Server-side Programming

1) Querying the database

2) Operations over databases

3) Access/Write a file on server.

4) Interact with other servers.

5) Structure web applications.

6) Process user input.

 Benefits Server-side Scripting

Scalability
Pengembangan web dapat menjadi sangat menantang jika
kita memiliki banyak sekali users yang mengunjungi website
kita; semakin banyak users yang berkunjung, semakin
banyak sumber daya (resource) yang dibutuhkan oleh
aplikasi web.

Bahasa pemrograman sisi server akan memastikan bahwa web server

dapat menangani permintaan traffic secara efisien.

Hal ini akan memungkinkan kita untuk menangani data traffic yang
sangat besar tanpa perlu khawatir situs web akan lemot (website
crashing).
 Benefits Server-side Scripting

Security
Server-side scripting language adalah bagian penting dari
manajemen keamanan aplikasi web karena menyediakan
validasi input dan output encoding, mencegah
sebagian besar serangan injeksi kode.

Server-side scripts juga berguna untuk melacak profil

pengguna, menghapus spam, dan bahkan memblokir
lalu lintas berdasarkan alamat IP.
 Laravel Controller

MVC URL Routing system allows to create powerful and flexible URLs for the applications.
It provides two functionalities:
1) Inspect incoming URLs - This functionality manifests when the application receives a client request.
2) Generate outgoing URLs - This functionality manifests when we render URLs using Url Action in the
View.
 3 - Server-side Scripting
Languages for Web Development
 Server-side scripting languages are a type of programming
language that runs on the server instead of the client. These
programming languages can create dynamic websites and web
applications, perform scheduling and data mining tasks,
automate processes such as compilation, and send emails.
PHP
The PHP interpreter is found on more
than 20 million websites. The flexibility
of PHP makes it easy to integrate with
many different databases, including SQL
and MySQL, and independent of any
particular database system.

In addition to its flexibility, PHP is

notable for being open-source software.
Most web servers use PHP to implement
the Basic and Configuration Directives
(known as Apache mod_php). Because of
its popularity, the demand for PHP
programmers is high. PHP also has
several high-profile users, including
Facebook and Wikipedia.
 Node.js

Node.js is a server-side scripting language and a runtime

environment that runs scripts written in various programming
languages, including JavaScript and CoffeeScript. This means
it can run any type of software with the help of external
libraries or frameworks.
 Python

Python can run on any operating system as a server-

side language, but it’s often used for web
applications. In fact, many people claim that it is the
best programming language to use when developing
websites and servers.
 Manakah server-side
programming language
kesukaan kalian???
Berikan alasan.
Exercise for Students
1 – Create Database in
XAMPP using
phpMyAdmin Tools
 Xampp Database Management Tools
phpMyAdmin adalah sebuah aplikasi web yang digunakan untuk mengelola dan mengelola
database MySQL melalui antarmuka grafis. phpMyAdmin dapat digunakan dengan LAMP
stack. LAMP stack adalah akronim untuk kombinasi software yang sering digunakan bersama-
sama untuk mengembangkan dan menjalankan aplikasi web, diantaranya yaitu:
1) Linux: Sistem operasi berbasis kernel Linux.
2) Apache: Server web yang umum digunakan untuk menyajikan konten web.
3) MySQL: Sistem manajemen basis data relasional (RDBMS) yang digunakan untuk menyimpan data.
4) PHP: Server skrip yang digunakan untuk mengembangkan aplikasi web dinamis.

Link: http://localhost/phpmyadmin/
 Navigate to Database on phpMyAdmin
Navigate cursor to http://localhost/phpmyadmin/ and click button “new”.
 Create a Database

See the option to “Create a Database” and input field to enter the database name. Write
the database name and click the “Create” button.
 Create Tables Using phpMyAdmin

By default the HostName is

‘localhost’, MySQL user is ‘root’
and have no password.
In the phpMyAdmin click on the “Structure” tab and click on the “Create new table
on database” wizard to get started. You can see above fields, you can add the table
name and the total number of fields (columns) and click the “‘Go” button.
 Specify Data Type

After the data type, you can specify other optional attributes for each column.
Table Structure
 MySQL Insert Data via SQL Suery

INSERT INTO tbl_lecturer (id, name, email, phone) VALUES ('1001', 'Jhon Tegar', '[email protected]', '098121213');
INSERT INTO tbl_lecturer (id, name, email, phone) VALUES ('1002', 'Deti Tibar', '[email protected]', '098121234');
INSERT INTO tbl_lecturer (id, name, email, phone) VALUES ('1003', 'Dony Desas', '[email protected]', '098121345');
INSERT INTO tbl_lecturer (id, name, email, phone) VALUES ('1004', 'Pari Polos', '[email protected]', '098121646');
INSERT INTO tbl_lecturer (id, name, email, phone) VALUES ('1005', 'Soei Siali', '[email protected]', '098121890');
Data from a MySQL Database
2 – Set Password to
phpMyAdmin on
XAMPP
 User Accounts

Click on the “user accounts” option at the top of the page and press the “edit privileges” under
“actions” option for the Username “root” and Hostname “localhost”.
 Change/Edit Password

Choose the third tab “change password” and type your password in the provided field, retype the
password to confirm it and then finally click on the “Go” button to conclude the process.
Error Access Denied
 Configuration Settings [allow without password]
ERROR #1045 - Access denied for user 'root'@'localhost' (using password: NO) when opening http://localhost/phpmyadmin.
 Navigate to "C:\xampp\phpMyAdmin"
 Find the file "config.inc.php" and open in a Notepad or better, Notepad++ (run as adminstrator).
 At line # 18 to 24, is the settings for user authentication.

Change the values to :

/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'cookie';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '12345';
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = false;
$cfg['Lang'] = '';
password: password is not set in the configuration file.
Sign In Testing
 Reset Root Password
In case when you have installed XAMPP, you did the security settings, but after a time you have
forgot the root password.
1. Open folder “C:/xampp/mysql/”
> Run this batch file: resetroot.bat

2. Go to the “C:/xampp/mysql/bin/” folder.

3. Edit my.ini and insert skip-grant-tables below [mysqld].
4. Restart MySQL (Open xampp control panel and stop it).
5. Buka mysql:
> mysql -u root –p
> password: (password kosong di enter saja)
6. Set new password for the root user by running UPDATE mysql.user SET
Password=PASSWORD('new_password') WHERE User='root' in phpMyAdmin in the MYSQL
database.

7. Force the password prompt for the root user:

> FLUSH PRIVILEGES;
> ALTER USER root@localhost IDENTIFIED VIA mysql_native_password USING PASSWORD('new
secret password');
> FLUSH PRIVILEGES;

8. Don’t forget to edit “my.ini” again and remove skip-grant-tables below [mysqld].
3 – Create More tables
Sistem absensi mahasiswa secara online dengan dua
aplikasi (mobile app dan web app) memiliki tujuan
untuk memudahkan students dan staf dalam
melakukan absensi dan pengelolaan kehadiran
mahasiswa di kelas.
 Nama table: tbl_operator
Database Name: “db_attendance”
Table Name: tbl_operator

INSERT INTO `tbl_operator` (`nip`, `email`, `fullname`, `password`, `phone_number`, `role`, `created_at`, `updated_at`) VALUES ('23456',
'[email protected]', 'Stenly Adam', '12345', '0852123456', 'admin', '12-04-2023 12:04:32', '12-04-2023 12:04:32');

INSERT INTO `tbl_operator` (`nip`, `email`, `fullname`, `password`, `phone_number`, `role`, `created_at`, `updated_at`) VALUES ('34567',
'[email protected]', 'Reymond Rotikan', '12345', '0852123456', 'staff', '12-04-2023 12:04:32', '12-04-2023 12:04:32');

INSERT INTO `tbl_operator` (`nip`, `email`, `fullname`, `password`, `phone_number`, `role`, `created_at`, `updated_at`) VALUES ('12345',
'[email protected]', 'Andrew Liem', 'abc123', '0852123456', 'admin', '12-04-2023 12:04:32', '12-04-2023 12:04:32');

INSERT INTO `tbl_operator` (`nip`, `email`, `fullname`, `password`, `phone_number`, `role`, `created_at`, `updated_at`) VALUES ('12345',
'[email protected]', 'Gladis Sepang', 'abc123', '0852123456', 'admin', '12-04-2023 12:04:32', '12-04-2023 12:04:32');
 Nama table: tbl_students
Database Name: “db_attendance”
Table Name: tbl_students

INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '954321', '[email protected]', 'Putri Moningka', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '854321', '[email protected]', 'Sandra Dewi', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '754321', '[email protected]', 'Citra Lentari Anada', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '554321', '[email protected]', 'Dinda Manopo Putri', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '454321', '[email protected]', 'Miehie Kawekiang Sie', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '354321', '[email protected]', 'ChinChin Long', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '254321', '[email protected]', 'Putra Podomi', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '154321', '[email protected]', 'Radix Basalama', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '604321', '[email protected]', 'Margono Raharjo', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
INSERT INTO `tbl_students` (`reg_number`, `nim_number`, `email`, `fullname`, `password`, `created_at`, `updated_at`) VALUES ('123456789012', '644321', '[email protected]', 'Sempoyonangan Ojomiso', '12345', '2023-04-13 22:54:33', '2023-04-13 22:54:33');
 Nama table: tbl_classes
Database Name: “db_attendance”
Table Name: tbl_classes
Columns:
Table Lecturer Class:
Design Database
1) Unik ID Subject/Class/Matakuliah 1) `id_class`, (Primary Key)
2) (Otomatis) Lecturer Email 2) `email_lecturer`,
3) Code Matakuliah 3) `code_class`,
4) Nama Subject/Class/Matakuliah
5) Lecturer Name (Pengajar) 4) `name_subject`,
6) Fakultas 5) `name_lecturer`,
7) Jurusan (Program Studi) 6) `fakultas`,
8) SKS
9) Building & Nomor Ruangan (Room) 7) `prodi`,
10) Room Latitude 8) `sks`,
11) Room Longitude 9) `building_room`,
12) Jadwal Class Hari/Waktu (Day/Time)
13) Daftar Email Mahasiswa 10) `room_latitude`,
14) Created_at 11) `room_longitude`,
15) Status Class (active or completed) 12) `jadwal_class_day_time`,
13) `daftar_email_student`, (Data type: Text)
14) `created_at`,
15) `status_class`
 Nama table: tbl_attendance_list
Database Name: “db_attendance”
Table Name: tbl_attendance_list
Columns:
Table Daftar Schedule Attendance:
1) Unik ID schedule presensi untuk setiap daftar kehadiran Class 1) `id_attendance`,
2) Title/Judul/Deskripsi yang unik untuk pengisian presensi 2) `title_short`,
3) Jadwal date pengisian presensi (tanggal pengambilan kehadiran)
4) Jadwal time pengisian presensi (waktu pengambilan kehadiran) 3) `date_attendance`,
5) Unik ID Subject/Class/Matakuliah
6) Nama Subject/Class/Matakuliah
4) `time_attendance`,
7) Lecturer Email 5) `id_class`,
8) Lecturer Name
9) Room Latitude 6) `name_subject`,
10)
11)
Room Longitude
Maximum radius (jarak/distance/zone) pengambilan presensi
7) `email_lecturer`,
12) Created_at 8) `name_lecturer`,
9) `room_latitude`,
10)`room_longitude`,
11) `max_radius`,
12) `created_at`
 Nama table: tbl_attendance_history
Database Name: “db_attendance”
Table Name: tbl_attendance_history
Table History Kehadiran Mahasiswa:
1) ID Unik Subject/class/Matakuliah
Columns:
1) `id_class`,
2) ID Unik attendance schedule untuk setiap daftar kehadiran Class
2) `id_attendance`,
3) Student Email
3) `email_student`,
4) Nama Matakuliah
4) `name_subject`,
5) Lecturer Email
5) `email_lecturer`,
6) Longitude Posisi Student (Bukan koordinat class)
6) `student_lat`,
7) Latitude Posisi Student (Bukan koordinat class)
7) `student_long`,
8) Jarak/distance pada saat pengambilan presensi
8) `distance`,
9) Selesai Dalam waktu
9) `time_take_attendance`,
10) Status Kehadiran (Hadir, Late, Absen, Izin)
10) `status`,
11) Note (keterangan sakit, izin, etc.)
11) `note`,
12) Created at (tanggal/waktu pada saat pengambilan absen)
12) `created_at`

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '16', '10:00:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '12', '10:05:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '20', '10:08:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '15', '10:20:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '6', '10:30:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '7', '10:45:49', 'P', '', '2023-04-13 22:54:33');

INSERT INTO `tbl_attendance_history` (`id_class`, `id_attendance`, `email_student`, `name_subject`, `email_lecturer`, `student_lat`, `student_long`, `distance`, `time_take_attendance`, `status`, `note`, `created_at`) VALUES ('CLASS643ac4d56e4a8', 'ATD745ac4d56e4b7', '[email protected]', 'Artificial Intelligence',
'[email protected]', '1,239484', '124,348583', '8', '10:27:49', 'P', '', '2023-04-13 22:54:33');
3 – View Data in Table
tbl_lecturer using
Server Script Language
 Create Working Directory
Working Directory:

C:/xampp/htdocs/datadosen
 Xampp “htdocs” Directory
 Dalam XAMPP, direktori "htdocs" memiliki peran penting sebagai direktori utama tempat
kita menyimpan file-file proyek web. "htdocs" adalah singkatan dari "HyperText
Documents," folder ini adalah tempat di mana kita dapat menyimpan file HTML, CSS,
JavaScript, gambar, dan file-file lain yang berkaitan dengan project web.

 Ketika mengakses "localhost" atau "127.0.0.1" pada browser web setelah mengaktifkan
server Apache di XAMPP, server web akan merujuk ke direktori "htdocs" sebagai root dari
server lokal. Ini berarti semua file dan folder yang diletakkan di dalam direktori "htdocs"
dapat diakses melalui server local (public directory).

Jika kita memiliki file dengan nama

"index.html" di dalam direktori
"htdocs," kita dapat mengaksesnya di
folder melalui web browser dengan
menavigasi ke
"http://localhost/index.html."
Write PHP & HTML Codes
 Expected Output
Open browser dan ketikan URL berikut:
http://localhost/datadosen/view.php
END PRESENTATION
Thank you for your attention
Instructor: S – W – T

THANK YOU