Pengenalan Backend

Mata Kuliah: Pemrograman Berbasis Web


🧭 1. Pengertian Backend

https://images.openai.com/static-rsc-4/DFolXQdegML_vnsubCOm5yVnk-zHooiWBxOm-MLmdN2USjaioYT4c25D1yBiWTNhiMyMTLJ6Qg_dVPOyn4e_h9O9qdU6wlBKjqQ35qyQ1sq19-gWL84SdhMP830Rmm2nn30KFujyMEWLig4Lj4L2AmgHQuQbWk532f5L614thGh13eFsU3Zuu3vXr6qHXHRT?purpose=fullsize
https://images.openai.com/static-rsc-4/J-9lZsNR5Egi6If8gI5bo1PjyhwZsF3pGWaNlN37bPgdjp9TS0nHFnNMkQj2GdSGO5TUI8HJZkVD0enaXVID3Zwjeqq_YVvP4tCYRzWTiqev-4nGRHdcGkDSvm9Nm5KRqYSET7lXZIImMNMj7crBEbXJyvkCRbHBBt4IYa50Ivk3B5JppaWWJgUxRpiETPxq?purpose=fullsize
https://images.openai.com/static-rsc-4/Ff5WuFtUisaPqcd0Kk6YG7YHeJthHgUOcP5ZlrJQ3uSbAlG73XNcJ_knBLBxEcl2vwf8aA_lhOKr-uvlj4FR9PNOyLPl-pMJ8OJIeNLM8RyUP1WIgjFe6oENiNLHjMh_2HU2c605n7sGR-uKmRj5G1yFdPyaXhxnZ7bdqAJj4V0kGh8BjqUcRGMOe9ACWJcS?purpose=fullsize

6

πŸ“– Deskripsi

Backend adalah bagian dari aplikasi web yang berjalan di server dan bertanggung jawab untuk:

  • Mengelola logika aplikasi
  • Memproses data
  • Berinteraksi dengan database

🧠 Narasi

Jika frontend adalah tampilan yang dilihat pengguna, maka backend adalah mesin di balik layar. Backend menangani semua proses penting seperti login, penyimpanan data, dan pengolahan informasi sebelum dikirim kembali ke browser.


🌐 2. Arsitektur Web (Client–Server)

https://images.openai.com/static-rsc-4/DFolXQdegML_vnsubCOm5yVnk-zHooiWBxOm-MLmdN2USjaioYT4c25D1yBiWTNhiMyMTLJ6Qg_dVPOyn4e_h9O9qdU6wlBKjqQ35qyQ1sq19-gWL84SdhMP830Rmm2nn30KFujyMEWLig4Lj4L2AmgHQuQbWk532f5L614thGh13eFsU3Zuu3vXr6qHXHRT?purpose=fullsize
https://images.openai.com/static-rsc-4/4f46MUg10kKOwBC7M6pRjiFT7MivvmrC1n6COpEEgz2T_3HmBgONU6cTqFdQewU0C0OiNJCKicG5vD9Yxg5JlYB7dtiNBULehvMGkJNvmasPZ-VpMOOhrd5hExrKqX0WgacpSDqXL0PwRGEYThK0tkFCNWPQBg7T_Bn5bAP-HFrwhC4nKOHcC9LjbgjDJGX6?purpose=fullsize
https://images.openai.com/static-rsc-4/dYGNDcKP_nBfJwqAkjP33gMjAcb7qo5-gZpqvk2wT8SQMrEZ7hgMMl2bGsYtah1zRLuU8crUSN18PE0_OnnmaebDu10R5QF1XBQrp8Ud8wHpt4KTRUfWBjAXwnS1kxQe4cxcAu5ANyh-uqmb9DZhftsahZF6gGGPPt4byFPQWD8IRdaOcklQUYNSj2OvhIEt?purpose=fullsize

7

πŸ“– Deskripsi

Aplikasi web menggunakan arsitektur client-server.

πŸ”„ Alur Kerja

  1. Client (browser) mengirim request
  2. Server menerima request
  3. Backend memproses
  4. Server mengirim response

🧠 Narasi

Setiap interaksi pengguna seperti login atau submit form akan diproses oleh backend sebelum ditampilkan kembali ke pengguna.


βš™οΈ 3. Peran Backend dalam Web

https://images.openai.com/static-rsc-4/8jybB9A0QRmPWUcc8Gp45ewpV3q-hMhUj0eWptcIOcovx976YBggvm-yGBa3LbswBrYla0JWkw4Qo8SqX06ZnmE9ytmWGq5yizqnoSEWR5sm1LUucvy8cdbLpG-vU4LwuDzo92Kxl4I9LMqYc6beySbPj9ZHl6B3KlcZLu_auUbWDo_XX5KC67NHT4rFr1H4?purpose=fullsize
https://images.openai.com/static-rsc-4/dV71NZSLRZK4xmJ-WHSKJgC3r-4z_N443z_goKf-dnMlX9CM8x1gakF6uE_G9Cy3dfQ8Z_BT9kCcKYW-W_1cUWAsK0ha6IoXnCatP7GnojcWo01-5B-IQEXDp5QHcFIZAkn5FLOLdQ8DPGKnzy-R93e1oOiZPYU1fc5oIwCWklXZw3WuWUIgwGC_TOALYAfa?purpose=fullsize
https://images.openai.com/static-rsc-4/kqBbWgkOVV3Rx63-pKzYGHGGj0LbZpYE8DvOS3uvxA3JZ-3YuGA7Woa7ExCAbrc0--DmtJ9d6z_PvPSNo6-8cK6nZ-jIplvXYXoo_tINjrCuP-u6nZ9mmxq7d4fqWJnksYCG8mw0YIB2BCofqGbcsaerVs8CKa1msWdV1KaZZgjM1MXe0K9ou-Gm1hMCMz1J?purpose=fullsize

9

πŸ“– Deskripsi

Backend memiliki beberapa fungsi utama:

🧱 Tabel Peran Backend

FungsiPenjelasan
AuthenticationLogin & keamanan
Data ProcessingMengolah data
DatabaseMenyimpan data
APIKomunikasi data

🧠 Narasi

Tanpa backend, website hanya bersifat statis. Backend membuat web menjadi dinamis dan interaktif.


πŸ”€ 4. Bahasa Pemrograman Backend

https://images.openai.com/static-rsc-4/hMIk3t7jxp75vvXFxGvtdDBYGuVv2ek9boCHNNxaVGQnBWfU-ryTYBKkUWId04Nbs_zFhT8f4azRlfm1r6ZA6BK4A4Pa5wD7X_zjIp2nkp-M3CZjM20_ZUOmMFTaeuLQSO5-H1in6gJG3Ra09mk-lWlUtOLWNtvF2Mdljcr0ea8xTnXhoG7ct60oE1QdWNkm?purpose=fullsize
https://images.openai.com/static-rsc-4/2cdQ2BW_camxQl_U0Fu_8nUbgoSdCaV-5khUJRwu-Vo0YlMHXzczucsvEsTXfFbkZfHOHnd-qkQNy1aT0dKta3jtPXymrFkza4BxcwYhW7YkVIHEvR85q2xbo5muOWpElyenVVY485B2-i7GIPFYjooZuey7m9zOK4MlppOzG82xcrT0VJRHKpsPz_nGT1EI?purpose=fullsize
https://images.openai.com/static-rsc-4/f2cXgeABWA1wvRd-vt4L8mWB65TOLZGXj4DT58RRTTUt2jkyFO6iUaro9reaNB-APgjUdfs8SpaSHh6WM1dp0Z8PweFDEtbuqlwNfdSLdY_l2XTbt5rxI-LK_l4YTim4mgqFDxLnbSo-9xy65h0y3KmJF9SaO87mlH8Gm6-IiWlsCO-xDn_yfsTukSKr4xrB?purpose=fullsize

6

πŸ“– Deskripsi

Beberapa bahasa yang digunakan:

🧱 Tabel Bahasa

BahasaContoh Teknologi
PHPLaravel
JavaScriptNode.js
PythonDjango
JavaSpring

🧠 Narasi

Pemilihan bahasa tergantung kebutuhan proyek, performa, dan ekosistem.


πŸ—„οΈ 5. Database dalam Backend

https://images.openai.com/static-rsc-4/J-9lZsNR5Egi6If8gI5bo1PjyhwZsF3pGWaNlN37bPgdjp9TS0nHFnNMkQj2GdSGO5TUI8HJZkVD0enaXVID3Zwjeqq_YVvP4tCYRzWTiqev-4nGRHdcGkDSvm9Nm5KRqYSET7lXZIImMNMj7crBEbXJyvkCRbHBBt4IYa50Ivk3B5JppaWWJgUxRpiETPxq?purpose=fullsize
https://images.openai.com/static-rsc-4/dou24MimgNJNYrl1GpgHKfyaR0PX9TtJLk4ZH1TCYSeL1oJH-p8Z7P98iwBba24e6kiwNkCztXKYv9yLzfjpGfmle5EZ9yc8drOa17AELYCswjXEKyzJ_jbvQ30rhuSzwo49Smkk2_AYqs24a9AfFrZdMda_ZmYPr-7QcxSbCfqi0I3Qpt1okfvEU4CpFU0G?purpose=fullsize
https://images.openai.com/static-rsc-4/SkWIL726KUVLIo9q7QgBROt8Zrf4ymoCw-q5z7LwTtJLsJNDgT_XDKi9GrS7g628mxxUJUBocw2xyT8PqOTQH79iUFSaO86JCKEuRSSuIlD5n_kT9VfTVmblW2feN6oTV4un2Y-wSyGgs5zBwx7_62YXVwibclPeSgoJLVtSMRrUZSvI0Q7StNEtJnBqCTRs?purpose=fullsize

6

πŸ“– Deskripsi

Database digunakan untuk menyimpan data.

🧱 Jenis Database

JenisContoh
RelasionalMySQL
Non-relasionalMongoDB

🧠 Narasi

Database adalah tempat penyimpanan permanen, seperti:

  • Data user
  • Produk
  • Transaksi

πŸ”Œ 6. API (Application Programming Interface)

https://images.openai.com/static-rsc-4/gSu0ybQiJ4A1wedN3YVpZ7jnQ2NU3ityYm2h_27Nu5Y8lKdwDvZjASjOjjvl5GbxbM-TSiEiCV7Tu2zGDKmw_sfnFVDRdOIG6WCpGAOC1Fhi6pHrUJwRvx_f1rqBlwAguabxHprvLdMYedVtSktiJKQGbanMzIiR1vjRJicWWlS48w76n6LV4da9tbkyLOLA?purpose=fullsize
https://images.openai.com/static-rsc-4/rAQRo3C6_LSy3udaxd2Ever5uGumwwvClTlE9MMF2qqR3xGHWSevzNX_8Wb0FJGuRxIxy2Euai70mL7Ut5_4L9AWUZPtN75SriHqsCtzXjcFJdZV3e8ScK4-8h6CE5IS_D0e3tHVK61gpcInWozGC6fVIo1mBM7z6m50kt_AjPouy6B8yfoBgH-78ZMQRuzc?purpose=fullsize
https://images.openai.com/static-rsc-4/fEBiELqPLV5tAwpDj5v8j1XUZTk4EvLRKQWVnpMXOUdQuHtrx4Kd8dVi6ZLcHk8II3VN5mE2afAKD-dlxjOqb1FAS53Ut6v064m-eSd7_uwJ5oUIPnqZy7nNBwd9mj4Ri730KVc4rrGvEHEoNxE_RY1gEStUPxQUEI8c6cqK1EValCikVTndtQUFsUhSNf0U?purpose=fullsize

6

πŸ“– Deskripsi

API adalah jembatan komunikasi antara frontend dan backend.

🧠 Narasi

Frontend tidak langsung mengakses database, tetapi melalui API. Data biasanya dikirim dalam format JSON.

πŸ’» Contoh JSON

{
"nama": "Budi",
"umur": 20
}

πŸ” 7. Keamanan Backend

https://images.openai.com/static-rsc-4/RwEe1wkIJoQBtZHqdDTKf-gLMSNbp8XnWvzY9YFqMd7KJDi-cg9o4uICYbSWP6bWVfbyEzOHI1zrRj-D8ctr_TvNXiN-MJecnbwbRL8jCGywLiBBTjUZFuRL6it6FFmpIrSkrk1tPB08vrOiH25nR9vbnqDwYJJOdTiDki-g5sk9UEypgx0mMu1pD3K4IqQX?purpose=fullsize
https://images.openai.com/static-rsc-4/ymE2VUxhnEVGr06k1hpoZezne-RpMpxmzl7jtVm_pZ43ZNPbnX-PF00KeSvekPa2FD5o03LnpK7KgopJYp9Y0-LzYEEiJDQBVTweLdTgnL8pRPLaYbory6EEGF0Fr59rnDe4HsZ6KQjU67Uxb44G-6pEHWzEwHVo9xsmHfSe8adwg5pOfyFvARPkwmeukxYZ?purpose=fullsize
https://images.openai.com/static-rsc-4/dCcfHuCmWKZXiKzeOP-xx6i9Q164z0c8fjMeZ0ITmfwQ4oq2i4QLk_gnvab3jnM3ZPLHz7Qd4-q72drxUE--V-flFfAyYgUIm3XmcMfyFFvb1K7hfcptsGM-TAd0aJjWgzXJeqtfPOSUxlLZu4xC0c-CfWrqjwbfOr2fY9ftt9SVgCMHAxguBdsMtEuq5Syf?purpose=fullsize

7

πŸ“– Deskripsi

Backend bertanggung jawab atas keamanan data.

🧱 Teknik Keamanan

TeknikFungsi
HashingEnkripsi password
ValidasiCegah input berbahaya
AuthenticationVerifikasi user

🧠 Narasi

Keamanan sangat penting karena backend menyimpan data sensitif pengguna.


πŸ–₯️ 8. Web Server dan Local Server

https://images.openai.com/static-rsc-4/6-2o9dEIklMpy-VaOMhYBFunL84qN_1QOy3AakNce1eSXeP4KsqtctgV5ZpXTkbMXT1jqQNtO6slQlP44CBG9MzA9BPhWnBy93VMx0Rn3KZHpDU6iYjmCvmkyab3vJvRGE6C373bfNpaTn54MCQq-SmhU6TUsW8HiSaAYpS_2jDsz7Pb7gdgEETDaQ54t5w2?purpose=fullsize
https://images.openai.com/static-rsc-4/Nvdex-lw3zu-Jeed5O7hS1mKEsHhkOCmPtuuUTr94mj5QOv-CRFdCUXXx_54Djg7ZpGgshFxQgam7NfV6G_SIlaNYIu7-6LYjgstjQixh0k0GznRs351GdA3_-wbjz8qhV3hgHCBBM-hDuDcjKWwEARDabP-9fXpXnih7lNkNkAk2urceoDBXEpgWT1e-Bia?purpose=fullsize
https://images.openai.com/static-rsc-4/baKxa7VlDrGT-QJcPzN5_jo4h2-IP_ILHgqap5JmZHw7uCV_tYJXz4bS0IP6Fo7LKLMG4ZrC1gtQ9MzUi7AlL3Tn4KuoelvY8cTxw3go9NCd3zWCoyNVIdPawANsnavhgNJIa4X0lL_fIdU5VOVJ8vo27DeafpsjjWpwCb9yEz6gskw1bCmt138x5C5D9xim?purpose=fullsize

8

πŸ“– Deskripsi

Web server adalah software untuk menjalankan backend.

🧱 Contoh Server

ServerFungsi
ApacheWeb server
NginxWeb server
XAMPPServer lokal
LaragonServer lokal

🧠 Narasi

Mahasiswa biasanya menggunakan server lokal untuk pengembangan sebelum deployment ke internet.


πŸ”„ 9. Alur Kerja Backend (Studi Kasus Login)

https://images.openai.com/static-rsc-4/bnZr35OjWXcJKBuyg3QolfZnrLqARCzGnmjmGioo4mnlSIMasSa7cmW6ja9CCylyGNmmaySDGI2LhnAr1KSgUbK1Dsz7W0_ajOhhaPEzg_z4TWG1Gt7tgEbzYTLAdleIQv9mzcC6ucrwDMqfUSMgAWkTQak1INKu3QqCDtfeg_OYypipx0WbDpZilwP5IMjG?purpose=fullsize
https://images.openai.com/static-rsc-4/k2vG4xJrWHYYbWWcomxZL9jd62wQhOS1M2TQuxkifp3E8ed_DymV2vcChRXBDiFkFvie1C2KL5xD3XIceKGA57pQcSECsjI9Ttk8tT6dvRK3lbXi00Q1th9IEbnsdHWcFhynRhrGFDPugazGLCmCxX7INwtvviF3wfsy0ZlQXjoZmysDn06ImwBI4LqhZq5L?purpose=fullsize
https://images.openai.com/static-rsc-4/wf-vu8pQ75O8IElYfo5dk3siLY-JQWV7oN9RTbGuF3nEfS39DDb0aea1hQMPtnKWHzZt3Nogb9XKMUYnBqsByBRMkwCTtuJ_uRZDxIFMcxYZTVi40JL9NE-ZumM4FxgS6etlcXqzsXiGE3wPEvm848BJIFIdpz1-DuyNWD4ji7x51QcjVWI8GiNeHSo9byB5?purpose=fullsize

8

πŸ“– Deskripsi

Contoh proses login:

πŸ”„ Alur

  1. User input username & password
  2. Data dikirim ke server
  3. Backend validasi
  4. Database dicek
  5. Response dikirim

🧠 Narasi

Proses ini terjadi dalam hitungan milidetik dan melibatkan banyak komponen backend.


⚠️ 10. Kesalahan Umum Backend

https://images.openai.com/static-rsc-4/OoDkVd1B8wN6FWfRx-5VZ0DNgUCGvht4ZdrDdWEAyrjlAdEMtY6htlYZY0t8cRVXdQX6jLatJmYQayPTzglNsYlLA0W1_IScxYesZPFd2bItTk-4vw4Vptt-XVQQQNqA7ENSENpZqKe72eGozqRXl8pnB3DRjRsOL-Zv8mej1K00JKJ5mtg3X_B00qwmSB9v?purpose=fullsize
https://images.openai.com/static-rsc-4/xVErITjFLlsRpGfuIY5tdwynskK36Tl_PXkJWXWmLxGs0nGk41_weHSNXELnLT-CR0ev5Zr4DqxeXdEwD_BbEs4mztzgHHlyCeUuEz8betyjM8J7btDB09-pGh5-paAAM3LCh-wcYJcNDVTEjN3MojuQbVrW4WIkwnWWHrpEnAYUYaHzyNUMD7mLCsvlZKWM?purpose=fullsize
https://images.openai.com/static-rsc-4/3KmQMF_7zyom-2lKoqb2uTEEUYuX3ALJUEVouo_aE_nb2yevncGb-HvAGLflhddUZrueVvHnY3PP5Cu1dK55rMwFqW--GKY55xFzeq_nzBNMV_ipAOGJbMlsK6whjyaf0XwB70L4bIbEInrn0jXb-7yO_Dc68AJo_zUzUFJKhIgJbdCCx_xJUBY8vGKT_44q?purpose=fullsize

5

πŸ“– Deskripsi

Kesalahan umum:

  • Tidak validasi input
  • Query database salah
  • Error server

🧠 Narasi

Debugging backend membutuhkan pemahaman logika dan error handling.


πŸ§ͺ 11. Studi Kasus Praktikum

🎯 Tugas

Buat simulasi:

  • Form login sederhana
  • Proses data di backend
  • Tampilkan hasil (berhasil/gagal)

🎯 12. Kesimpulan

  • Backend adalah inti logika web
  • Mengelola data dan keamanan
  • Berkomunikasi melalui API
  • Terhubung dengan database

πŸŽ“ Penutup

Materi ini menjadi dasar untuk:
➑️ PHP / Node.js
➑️ Database (MySQL)
➑️ Sistem login & CRUD