Web dinamis katalog sederhana dengan fitur CRUD lengkap untuk menambah, mengubah dan menghapus data katalog secara online. Fitur ini memungkinkan pengelolaan data katalog secara mudah dan fleksibel dari sisi administrator.

1. Introduction
Present by Eduwork.id

2. Website
● Website adalah sebuah kumpulan halaman pada
suatu domain di internet yang menyajikan
informasi
● Jenis jenis website : company profile, toko online,
blog, web portal, search engine, forum, sosial
media, dll
● Manfaat website : memperluas jangkauan
promosi, media tanpa batas, wadah komunitas, dll

3. Cara Kerja Website
Ada 2 bagian utama dalam aplikasi web, yaitu yang pertama adalah sisi client dan yang kedua ialah sisi server.
● Client dapat mengakses aplikasi web melalui web browser, seperti mozilla firefox, google chrome, internet explorer, dan
web browser lainnya.
● Server adalah perangkat komputer dengan spesifikasi yang bagus dan digunakan untuk menyimpan aplikasi web
beserta database server yang siap untuk diakses oleh client.

4. Perbedaan Localhost Dan Web Hosting
Localhost (Website offline)
● Localhost memiliki server yang disebut sebagai server offline.
● Kenapa disebut sebagai server offline? Hal ini dikarenakan setiap data website yang dimasukkan kedalam server ini
tidak bisa untuk diakses dari luar.
Web Hosting (Website Online)
● Web hosting atau bisa disebut sebagai server online merupakan server yang digunakan dalam menyimpan data-data
dari sebuah website yang telah dikembangkan pada server localhost.
● Website dapat diakses user manapun melalui internet.

5. File Manager Offline (Lokal) File Manager
Online (Web Hosting)

6. Database
Database atau basis data adalah kumpulan data yang dikelola sedemikian rupa berdasarkan ketentuan tertentu yang saling
berhubungan sehingga mudah dalam pengelolaannya. Melalui pengelolaan tersebut pengguna dapat memperoleh kemudahan
dalam mencari informasi, menyimpan informasi dan membuang informasi.
Macam Macam Database

7. Server Database Offline / Local Server Database Online

8. Cara Kerja Database

9. Aplikasi yang dibutuhkan :
Web Server - Untuk running website Text Editor - Untuk membuat Website
(xampp) (wamp) (sublime)
(visual studio code) (notepad++)

10. Pengertian Web Server
● Sebuah software yang memberikan layanan berupa data
● Perangkat yang menyimpan dan mengirimkan konten website
● Berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien atau kita kenal dengan web browser
● Terdapat 2 jenis web server : online dan offline (lokal komputer)

11. Manfaat Web Server
● Menjalankan sebuah website
● Menampung file file project
● Menampung database
● Melakukan pemeriksaan terhadap sistem security
● Menyediakan data berdasarkan request

12. Pengertian Text Editor
Text Editor adalah suatu software aplikasi atau suatu program komputer yang memungkinkan user untuk membuat,
mengubah atau mengedit file teks yang ada berupa plain text.

13. Manfaat Text Editor
● Mempermudah menghapal syntax karena
terdapat fitur autocomplete
● Mencari kata pada sebuah file ataupun folder
● Membantu kita untuk melihat stuktur folder file
dan source code

14. Cara menyusun project di localhost

15. Cara running project di localhost
Cara membuka database di localhost

16. HTML
Present by Eduwork.id

17. Latar Belakang
HTML merupakan sebuah dasar ataupun pondasi bahasa pemrograman sebuah web page, HTML muncul sebagai standar
baru dari kemajuan dan berkembangnya internet.
Deskripsi
HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun
halaman dan aplikasi web. Anda bisa menggunakan bahasa markup ini untuk bagian paragraf, heading, maupun link pada
suatu web page.
Manfaat
● Membuat halaman web.
● Menampilkan berbagai informasi di dalam sebuah browser Internet.
● Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

18. CREATE FILE HTML

20. TUGAS
Silahkan buat beberapa file HTML dalam 1 folder

21. TAG HTML

25. MEMBUAT MENU

30. MEMBUAT FORM

35. TUGAS

36. CSS
Present by Eduwork.id

37. Latar Belakang
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan
untuk mengatur gaya (style) tampilan website.
Deskripsi
CSS adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up
language. Salah satu contoh bahasa mark-up paling populer adalah HTML yang tergolong sebagai bahasa pemrograman
standar dan lazim digunakan dalam pembuatan halaman web.
Manfaat
CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). CSS menangani tampilan dan ‘rasa’ dari
halaman website.

38. INLINE, INTERNAL,
EXTERNAL

41. ATRIBUT CSS

44. TUGAS
Silahkan buat file HTML seperti tampilan di bawah ini :
https://www.instagram.com/

45. BOOTSTRAP

46. Apa itu Bootstrap ?
Bootstrap adalah framework open-source khusus front end
yang awalnya dibuat oleh Mark Otto dan Jacob Thornton
untuk mempermudah dan mempercepat pengembangan
web di front end.
https://getbootstrap.com/

53. TUGAS
Memasukkan bootstrap pada tugas yang membuat halaman di materi HTML

54. MYSQL
Present by Eduwork.id

55. Deskripsi
MySQL adalah sebuah DBMS (Database Management System) menggunakan perintah SQL (Structured Query Language)
yang banyak digunakan saat ini dalam pembuatan aplikasi berbasis website. MySQL dibagi menjadi dua lisensi, pertama
adalah Free Software dimana perangkat lunak dapat diakses oleh siapa saja. Dan kedua adalah Shareware dimana perangkat
lunak berpemilik memiliki batasan dalam penggunaannya.
Manfaat
Secara garis besar, fungsi dari MySQL adalah untuk membuat dan mengelola database pada sisi server yang memuat
berbagai informasi dengan menggunakan bahasa SQL. Fungsi lain yang dimiliki adalah memudahkan pengguna dalam
mengakses data berisi informasi dalam bentuk String (teks), yang dapat diakses secara personal maupun publik dalam web.
Aplikasi yang dibutuhkan

56. TYPE DATA DAN
PRIMARY

60. Pengertian Primary Key
Primary key adalah suatu nilai dalam basis data
yang digunakan untuk mengidentifikasi suatu baris
dalam tabel. Nilai dari primary key adalah unik.
sedangkan secara sederhananya, primary key dapat
diartikan sebagai kolom yang berisi nilai unik,
berfungsi sebagai identitas untuk membedakan
setiap record yang ada pada tabel.

61. TUGAS
Silahkan buat beberapa table dalam 1 database.

62. RELASI

66. TUGAS
Deskripsikan relasi relasi yang ada pada database yang sudah dibuat sebelumnya.

67. FOREIGN KEY

68. Add Foreign Key

70. TUGAS
Buatlah foreign key pada database yang sudah dibuat.

71. QUERY CRUD

72. Query Insert

73. Query Update

74. Query Delete

75. TUGAS
Buatlah query untuk create, update dan delete. Masing masing 5 buah query.

76. QUERY
MENAMPILKAN DATA

88. TUGAS
Buatlah 15-20 macam macam query untuk menampilkan data.

89. MACAM MACAM
JOIN

94. TUGAS
Buatlah 5 macam macam query join untuk menampilkan data.

95. PHP
Present by Eduwork.id

96. Latar Belakang
PHP diciptakan oleh Rasmus Lerdorf seorang pemrogram C, dan digunakan untuk mencatat jumlah pengunjung pada
homepage-nya. Pada awal tahun 1995 dirilis PHP/FI (Form Interpreter) yang memiliki kemampuan dasar membangun aplikasi
web, memproses form dan mendukung data mySQL
Deskripsi
PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk
penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.
Manfaat
Fungsi PHP secara umum ialah untuk mengakses layanan Web dan mengubah halaman HTML statis menjadi halaman
dinamis. Memanfaatkan fungsi PHP dengan baik akan otomatis bisa mengembangkan situs web statis atau situs web.
Sebagai bahasa pemrograman yang biasanya diterapkan untuk membuat website.

97. SINTAKS DASAR

102. TUGAS
Buat sebuah informasi text yang diberi desain pada halaman html, dimana informasi text tersebut adalah variable dari php

103. OPERATOR

111. TUGAS
Buatlah file php untuk menghitung 5 macam jenis bangun datar dan 3 macam jenis bangun ruang.

112. KONDISI

116. TUGAS
Buat kondisi tanggal lahir yang akan memberikan output zodiak

117. SWITCH CASE

119. TUGAS
Buat kondisi tahun lahir yang akan memberikan output shio

120. LOOPING

132. TUGAS
Mencetak data tanggal berurutan menggunakan looping

133. ARRAY

137. TUGAS
Tampilkan data dari array, menggunakan looping.

138. FUNCTION

140. TUGAS
Membuat 5 function untuk menghitung rumus rumus bangun ruang dan bangun datar.

141. Javascript
Present by Eduwork.id

142. Latar Belakang
Javascript diciptakan selama 10 hari saat bulan Mei 1995 oleh Brendan Erich, yang bekerja di Netscape (sekarang Mozilla) .
Sebelum bernama Javascript, ia terlebih dahulu dinamai Mocha dan selanjutnya pada September 1995 namanya diubah
kembali menjadi Livescript. Hingga pada Desember 1995 dinamai menjadi Javascript sejak lisensinya di miliki Sun
Deskripsi
JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif.
Kalau sebelumnya kamu hanya mengenal HTML dan CSS, nah sekarang kamu jadi tahu bahwa JavaScript dapat
meningkatkan fungsionalitas pada halaman web.

143. PENGENALAN

148. TUGAS
Menampilkan macam macam function di javascript menggunakan parameter.

149. LOOPING

151. TUGAS
Explore macam macam looping lainnya

152. JQeury
Present by Eduwork.id

153. ELEMEN HTML

156. TUGAS
Buatlah sebuah form html, dimana si button akan tetap disable ketika form inputan dari html belum diisi / masih kosong.

157. CONTOH PLUGIN

158. https://datatables.net/manual/installation

160. TUGAS
Buat 2 datatable

161. WEB Dinamis Simple
Present by Eduwork.id

162. CONNECT

164. TUGAS
Silhakan coba buatlah file connection dan script query untuk menampilkan data.

165. - INDEX
- CREATE
- UPDATE
- DELETE

166. TUGAS
Buatlah WEB CRUD pada database yang telah dibuat.

167. Tugas Besar
Present by Eduwork.id

168. TUGAS : Membuat web dinamis katalog sederhana, lengkap dengan bagian CRUD nya.