## PELATIHAN DASAR FULL-STACK WEBSITE DEVELOPER BAGI KOMUNITAS PEMBELAJAR WEB
Felix Andreas Sutanto [1] , Budi Hartono [2] , Dwi Agus Diartono [3] , Hari Murti [4] [1],[2] Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Stikubank
[3],[4] Program Studi Sistem Informasi, Fakultas Teknologi Informasi, Universitas Stikubank
[1] felix@edu.unisbank.ac.id*, [2] budihartono@edu.unisbank.ac.id, [3] dwieagus@edu.unisbank.ac.id,
[4] harimurti@edu.unisbank.ac.id * Corresponding Author Informasi Artikel: Submitted  : 05/Juli/2021 Revised : 14/Juli/2021 Accepted : 21/Juli/2021 Published  : 10/Agustus/2021

## Abstrak
Bagi  startup  pemula,  kemampuan  full-stack  developer  sangat dibutuhkan  dalam  membangun  suatu  aplikasi.  Komunitas Pembelajar  Web  Semarang  Barat  seringkali  memiliki permasalahan  untuk  menemukan  developer  front-end  dan back-end dalam membuat aplikasi. Solusi yang tim pengabdian tawarkan  adalah  pelatihan  full-stack  website  developer  agar anggota  komunitas  memiliki  kemampuan  untuk  membangun aplikasi secara keseluruhan. Metode  pengabdian  kepada  masyarakat  dengan  memberikan pelatihan  dalam  mempersiapkan  web  server,  mengelola database  dan  mengintegrasikan  program  yang  dibangun dengan bahasa PHP. Target  dari  kegiatan  ini  adalah  anggota  komunitas  dapat berperan  sebagai  full-stack  website  developer  untuk  aplikasi- aplikasi yang berskala kecil.
Kata Kunci: full-stack developer, front-end, back-end, website, startup

## 1. P ENDAHULUAN
Pada  saat  membangun  aplikasi  berbasis  web,  ada  dua  bagian  penting  yang  prosesnya terjadi secara terpisah. Para pengembang web familiar dengan istilah front-end dan back-end . Back- end mengacu  pada  proses  yang  terjadi  di  sisi  server,  sedangkan front-end mengacu  pada  proses yang  terjadi  di  sisi  client  atau  pengguna  aplikasi.  Untuk  memiliki  kemampuan  pemrograman dikedua sisi tersebut tidaklah mudah. Ada banyak bahasa pemrograman yang harus dikuasai, selain itu juga harus mampu mengelola database. Hal tersebut menjadi masalah bagi semua programmer web. Akan tetapi terkadang kondisi tersebut harus dihadapi oleh orang yang baru merintis startup karena  keterbatasan  personil.  Bagi startup pemula,  kemampuan full-stack  developer sangat dibutuhkan dalam membangun suatu aplikasi.
Komunitas Pembelajar Web Semarang Barat adalah kelompok yang terdiri dari mahasiswa dan  umum.  Komunitas  ini  didirikan  untuk  membantu  para  pemerhati  dan  pembelajar  web  agar dapat membangun aplikasi, khususnya yang berbasis web.  Kesulitan yang dihadapi komunitas ini adalah  jumlah  personil  yang  menguasai back-end dan front-end  programming ,  sehingga  masih sedikit anggota yang dapat membangun aplikasi secara mandiri.
Tim  pengabdian  memberikan  pelatihan  dasar full-stack website  developer sebagai  solusi permasalahan yang dihadapi oleh Komunitas Pembelajar Web. Dengan latar belakang kemampuan pemrograman  yang  dimiliki  oleh  anggota  komunitas,  pada  kegiatan  ini  akan  dilakukan  pelatihan dalam mengelola web server, database dan pemrograman disisi server maupun client.

## 2. M ETODE
Pelaksanaan  kegiatan  pengabdian  kepada  masyarakat  dilakukan  dengan  menganalisa situasi  mitra  pengabdian,  kemudian  memberikan  solusi  berupa  pelatihan,  pendampingan  dan
penerapan  aplikasi  dasar  yang  melibatkan  anggota  Komunitas  Pembelajar  Web.  Adapun  tahapan pelaksanaan metode pengabdian kepada masyarakat adalah sebagai berikut:
1. Analisis Situasi
2. Persiapan Kebutuhan Pengabdian
3. Pelaksanaan Pelatihan
4. Pendampingan Implementasi Aplikasi

## 3. H ASIL DAN P EMBAHASAN
Pelaksanaan kegiatan pengabdian kepada masyarakat dibagi menjadi lima kegiatan, yaitu identifikasi dan analisis situasi, kegiatan persiapan pelaksanaan yang meliputi penyusunan materi dan  pembagian  tugas  diantara  personil  tim.  Pelaksanaan  pelatihan  berkoordinasi  dengan Komunitas  Pembelajar  Web  dan  kegiatan  pendampingan  implementasi  dari  aplikasi  yang  dibuat oleh  anggota  komunitas.  Agar  tujuan  pengabdian  terlaksana,  tim  melakukan  monitoring  dan evaluasi  terhadap  aplikasi  yang  telah  dibuat  oleh  anggota  Komunitas  Pembelajar  Web  semarang Barat.

## 3.1 A NALISIS S ITUASI
Komunitas  Pembelajar  Web  adalah  kelompok  masyarakat  yang  bersama-sama  belajar pemrograman berbasis web. Komunitas terbentuk dimulai dari sekelompok mahasiswa yang ingin meningkatkan keahlian dibidang web developer. Seiring dengan waktu, anggota bertambah dengan pelajar-pelajar  yang  turut  bergabung  dalam  kamunitas  ini.  Sebagian  besar  anggota  berasal  dari wilayah Semarang Barat karena sekretariat berada di daerah Ngaliyan.
Aktifitas  komunitas  ini  adalah  bertukar  pengalaman  tentang  cara  membangun  web, membuat  program  sesuai  dengan  yang  diminati  oleh  anggota  komunitas.    Dari  hasil  wawancara dengan beberapa anggota, bahasa pemrograman dan scripting yang sudah dipelajari dan dikuasai adalah  PHP,  HTML  dan  CSS.  Untuk  manajemen  database  hanya  memiliki  kemampuan  dasar  SQL. AppServ dan XAMPP adalah aplikasi yang biasa digunakan mereka untuk membangun web karena dianggap mudah dalam pengoperasiannya.
Permasalahan  yang  membutuhkan  solusi  adalah  cara  membangun  web  secara keseluruhan.  Sebagian  besar  anggota  komunitas  belum  pernah  membuat  web  secara  mandiri. Bantuan yang dibutuhkan adalah pelatihan dan pendampingan untuk mempersiapkan bahan-bahan aplikasi  web,  cara  membuat  program back-end yang  baik serta  membuat  tampilan  interaktif bagi pengguna web disisi client.
Sarana  dan  prasarana  untuk  melakukan  kegiatan  pengabdian  kepada  masyarakat memadai.  Proses  pelatihan  dapat  dilakukan  dengan  mudah  karena  anggota  sudah  memiliki komputer  atau  laptop  pribadi,  selain  itu  anggota  yang  akan  mengikuti  kegiatan  pengabdian  juga bersedia untuk menyediakan koneksi internet secara mandiri.

## 3.2 P ERSIAPAN K EBUTUHAN P ENGABDIAN
Persiapan  yang  dilakukan  tim  pengabdian  adalah  menyusun  materi full-stack  website developer ,  memilih web  hosting yang  dapat  digunakan  untuk  praktek  dan  membuat  kerangka pemrograman  yang  dapat  dijadikan  template  untuk  mengembangkan  aplikasi  berbasis  web. Dengan  latar  belakang  yang  dimiliki  oleh  anggota  Komunitas  Pembelajar  Web,  tim  pengabdian memilih menggunakan bahasa pemrograman PHP untuk implementasinya.
Full-Stack development adalah bagian dari pengembangan web yang  secara luas mengacu pada tugas-tugas yang terkait dalam pengembangan situs web untuk hosting melalui intranet atau internet. Full-stack adalah pengembangan aplikasi lengkap baik front-end disisi client dan back-end disisi server. Persyaratan dasar  yang diperlukan untuk membangun web meliputi sistem operasi, server  web,  database,  dan  bahasa/ scripting .  Bersama  dengan  perangkat  keras  server  yang  tepat, kumpulan  komponen  ini  memastikan  bahwa  informasi  yang  diperlukan  dapat  diberikan  kepada klien yang meminta melalui browser internet (Dalmia & Chowdary, 2020). Secara umum, full-stack website  developer adalah  seseorang  yang  harus  bekerja  merangkap  tugas  sebagai  back-end  dan front-end developer. Developer bisa bekerja dengan javascript, PHP, java, database ( back-end ) dan juga bisa mengkonversi desain ke dalam kode pemrograman seperti HTML, CSS, XML ( front-end ).
Untuk  menjadi full-stack  website  developer ,  seseorang  harus  kompeten  dalam  perencanaan, penataan, implementasi dan pengujian proyek.
Program PHP dipilih karena sampai saat ini bahasa PHP sangat populer, banyak digunakan oleh para pengembang web serta mudah dipelajari karena banyak sumber materi di internet. Selain itu dukungan web hosting terhadap PHP juga banyak. Untuk mempelajari PHP  salah satunya bisa mengakses  situs  W3Schools  ( www.w3schools.com ).  Web  hosting  yang  gratis  dan mendukung  PHP salah satunya adalah 000webhost ( id.000webhost.com ) yang disediakan oleh Hostinger. Aplikasi  akan  lebih  mudah  untuk  dikelola  dengan  adanya framework /kerangka  hierarki aplikasi.  Contohnya  adalah  penggunaan framework CMS  yang  memudahkan  programmer  dalam mengaplikasikan  program.  Penggunaan framework CMS  dapat  digunakan  untuk  membuat  situs untuk pemasaran UMKM dengan mudah dan cepat (Sutanto dkk., 2015). Untuk membantu anggota Komunitas  Pembelajar  Web,  tim  pengabdian  membuat  kerangka  pemrograman  yang  dapat dimodifikasi  dalam  membangun  sebuah  aplikasi  berbasis  web  yang  berisi  frontpage,  login  dan modifikasi data yang sering disebut CRUD ( create, read, update & delete ). Pada pembuatan aplikasi berbasis web, aplikasi dibagi menjadi dua  bagian. Bagian pertama untuk administrasi dan bagian kedua untuk konsumen atau client.

## 3.3 P ELAKSANAAN P ELATIHAN
Full-stack developer memerlukan usaha yang lebih bagi seseorang yang ingin menekuninya. Ada  beberapa  keahlian  yang  diperlukan  untuk  menjadi  seorang full-stack  developer .  Untuk dasarnya, programmer web harus bisa beberapa scripting disisi client/browser seperti HTML, CSS dan  JavaScript.  Hal  tersebut  digunakan  untuk  membuat  tampilan  web  dan  interaksi  yang dibutuhkan oleh pengakses aplikasi web. Pekerjaan ini berhubungan erat dengan penataan layout, pemilihan warna, interaksi menu dan lain-lain. Sedangkan disisi server/ back-end , harus menguasai scripting yang bisa dieksekusi oleh web server dan mengirimkan informasi ke client. Selain scripting ,  pengembang  web  juga  harus  mengerti Structure  Query  Language (SQL) yang  digunakan  untuk  menyimpan  dan  memanipulasi  data.  Basis    data    merupakan    komponen yang  penting  dalam  sebuah  sistem  informasi  modern. Relational  Database    Management    System (RDBMS)  adalah  sistem    basis    data    yang  umum  digunakan  oleh  programmer  pada  saat  ini. Software  RDBMS    yang  umum    digunakan  dalam    sistem  informasi    adalah    Oracle,    SQL    Server, PostgreSQL,    DB2,    dan    MySQL.  Kualitas    sebuah    sistem    informasi    sangat    terpengaruhi    oleh kualitas    desain    basis    data.  Seringkali  seorang  programmer  pemula  kurang  melakukan optimalisasi  sebuah  query  di  MySQL,  padahal  optimalisasi  sangat    penting  ketika    jumlah  data menjadi besar. (Pamungkas, 2018).

## G AMBAR 1. S KEMA K EMAMPUAN S CRIPTING W EB DEVELOPER
Karena dasar dari full-stack website developer adalah menguasai scripting yang diperlukan untuk membangun aplikasi, maka pada kegiatan ini tim pengabdian memberikan pelatihan dengan memperkenalkan  sintak-sintak  dasar  dari  masing-masing scripting yang  terdapat  pada  gambar  1. Materi  pelatihan  diambil  dari  situs-situs  yang  memberikan  tutorial  tentang scripting tersebut. Daftar situs referensi yang disarankan oleh tim pengabdian dirangkum pada tabel 1.
T ABEL 1. D AFTAR REFERENSI M ATERI No.  Referensi URL Materi 1 W3schools www.w3schools.com HTML, CSS, JavaScript, PHP, SQL 2 Tutorialspoint www.tutorialspoint.com/php PHP 3 TutorialRepublic www.tutorialrepublic.com PHP, HTML5, CSS3 4 Java T point www.javatpoint.com PHP, HTML, SQL 5 Learn PHP www.learn-php.org PHP 6 Code Academy www.codeacademy.com HTML 7 BuildWith Angga www.buildwithangga.com HTML5, Full-Stack 8 HTML Dog www.htmldog.com HTML, CSS, JavaScript
Pelatihan dilaksanakan di ruang TIK Universitas Stikubank dan ada juga konsultasi secara online.  Anggota  Komunitas  Pembelajar  Web  diberikan  link-link  pembelajaran  yang  bisa  diakses untuk  memperdalam  pengetahuan.  Dari  pengamatan  tim  pengabdian,  peserta  dapat  memahami dengan  baik  dasar-dasar  dari  bahasa/ scripting HTML,  CSS  dan  PHP.  Ini  adalah modal  yang  bagus untuk melanjutkan ke proyek pembuatan aplikasi yang sebenarnya. Tim pengabdian memberikan saran bagi beberapa peserta untuk membuat startup dibidang web developer.

## G AMBAR 2. S ITUS R EFERENSI

## 3.4 P ENDAMPINGAN I MPLEMENTASI A PLIKASI
Agar  program  yang  sudah  dibuat oleh  Komunitas  Pembelajar  Web  dapat  diakses  melalui internet diperlukan sebuah web hosting . Penggunaan web hosting bisa dilakukan dengan menyewa web  hosting berbayar  maupun  mencari  penyedia web  hosting gratis.  Pada  kegiatan  ini  tim pengabdian  menyarankan  untuk  menempatkan  program pada web  hosting gratis  terlebih  dahulu. Dikemudian hari jika menerima proyek dapat menyewa hosting berbayar sekaligus menyewa nama domain sendiri.
Ada  banyak  penyedia web  hosting gratis  di  internet,  namun  pada  kegiatan  ini  tim pengabdian  memilih  000webhost  karena  layanan  yang  cukup  baik  dan  tidak  menampilkan  iklan. Situs penyedia hosting tersebut dapat diakses melalui www.000webhost.com (gambar 1). Pada versi gratis,  000webhost  memberikan  ruang  sebesar  300  MB,  batas bandwith 3  GB,  PHP  dan  MySQL Support  serta  fasilitas  Cpanel  untuk  memanajemen  situs.  Fasilitas  tersebut  cukup  untuk
pelaksanaan pelatihan pembuatan aplikasi. Untuk dapat menerima layanan gratis, pengguna harus mendaftar terlebih dahulu.

## G AMBAR 3. T AMPILAN SITUS 000 WEBHOST . COM
Setelah memiliki web hosting , langkah selanjutnya adalah menempatkan program aplikasi yang  telah  dibuat  sebelumnya.  Pada  kegiatan  ini  tim  pengabdian  telah  memberikan  contoh  atau template  aplikasi  ayng  bisa  dikembangkan  oleh  programmer.  Peserta  membuat  aplikasi  sesuai selera  masing-masing.  Tim  pengabdian  memberikan  evaluasi  terhadap  aplikasi  yang  telah  dibuat oleh  peserta  dan  melakukan  monitoring  terhadap  perkembangan  pembuatan  aplikasi.  Salah  satu hasil karya peserta dapat dilihat pada gambar 4.

## G AMBAR 4. C ONTOH H ASIL K ARYA P ESERTA

## 4. K ESIMPULAN
Pelaksanaan  kegiatan  pengabdian  kepada  masyarakat  pada  Komunitas  Pembelajar  Web Semarang  Barat  berhasil  memberikan  transfer  pengetahuan  dalam  membangun  web  secara keseluruhan ( full-stack ). Peserta telah dapat mempersiapkan web server dan mengiplementasikan aplikasi  agar  dapat  diakses  lewat  internet.  Namun  ada  hal  yang  harus  dilatih  kembali  untuk mendapatkan hasil yang maksimal. Keahlian desain perlu ditambahkan agar website tampak lebih menarik.  Untuk  itu  Komunitas  Pembelajar  Web  harus  belajar  aplikasi  pengolah  gambar  seperti Adobe Photoshop, Corel, Canva dan yang lainnya.

## D AFTAR P USTAKA
Dalmia, A. & Chowdary, A. R. (2020), The New Era of Full Stack Development, International Journal of Engineering Research & Technology (IJERT) Vol. 9 Issue 04, April-2020, 7-11.
Pamungkas, R. (2018), Optimalisasi Query Dalam Basis Data MySQL Menggunakan Index, Journal of Computer, Information System, & Technology Management Vol. 1, No. 2. April 2018, 27-31.
Sutanto,  Supriyanto,  &  Purwatiningtyas.  (2015),  Penerapan  E-Commerce  Berbasis  CMS  Dan  SEO Untuk Toko On-Line UMKM, Jurnal Abdimas Vol 19, No 2 2015, 91-99.