Become a Reliable Web

Programmer
menjadi programmer handal era

kekinian
Bekasi, 5 November 2020
 Feru Adiningrat
Lecturer – System Analyst – Web Designer
D3 - Cipta Karya Institute
S1 - STMIK Cipta Karya
Informatika
S2 - STMIK Nusa Mandiri
feru.adiningrat@gmail.com
 Garuda Indonesia Cargo
 Kompas Gramedia Group
 IBM Asmi
 AMIK BSI
 STMIK Bina Insani
 STMIK Pranata Indonesia
 Kalbis Intitute
 PT Superintending Company
of Indonesia
pro·gram·mer
/ˈprōˌɡramər/
noun

• a person who writes computer programs.

• a device that automatically controls the operation of
something in accordance with a prescribed program.
Web Programmer = programmer yang membuat aplikasi berbasis web
How should we start ?
Choose your own
path

+ =
Front-end developer Back-end developer Full stack developer
Tools and Software

Code Editor Good Browser Image Editor Development Tools

 Mozilla Firefox  Adobe Photoshop  SSH
 AWS Cloud
 Google Chrome  Adobe Illustrator  GIT
 Visual Studio Code
 Microsoft Edge  GIMP  WinSCP
 Sublime Text
 Opera  Composer
 Brackets
 FTP Client
 Vim
 DB Client
 Atom
 Notepad++
HTML and
CSS
 Learn before ANYTHING else
 Every website use them
 Easy and quick to learn
 Basic building layout (Grid-based, CSS based)
 Responsive is IMPORTANT
Javascript [is not
Java]

 Learn Basic JS [no framework]

 Data types, variable, operator, function, loop, etc.
 DOM manipulation [without JQuery]
 Ajax / JSON
Javascript [is not Java]
Deploying an online
website

Learn basic CPanel

Domain and hosting [creating subdomain,
[start from IDR 10k email, file manager, FTP
/month] account, etc]

Uploading file and database

[via Cpanel or FTP]
Front-end Dev Basic
Skills

 Build simple websites & UI [using HTML & CSS]

 Creating logo, banner and some web
component [using Adobe PS or AI]
 Creating some dynamic UI [with Javascript]
 Join a simple project
Where to
Next ?

 HTML / CSS Framework → Bootstrap, Materialize,etc

 Front-end JS Framework → ReactJS, Angular, etc
 Server side technologies → Python, PHP, NodeJS, etc
 Database → MySQL, MongoDB, etc
HTML / CSS Framework [pick
one]

Twitter Bootstrap Materialize CSS Foundation

[easy, most [responsive, material [advanced, responsive]
popular] design]

Skeleton Bulma Pure CSS

[a lightweight boillerplate] [easy to learn syntax, no [small and responsive]
JS]
Javascript Framework [pick
one]
React JS [popular for startup,
fast]

Angular JS [popular in enterprise, complete]

Vue JS [fast, light, easy to

use]

Ember JS [large and small scale web

applications]
Side Technologies You Should Learn Too

 GIT [version control system]

 Command Line [old, but you will need it someday]
 API / REST
 HTTP / SSL
 Composer [PHP], PyPi [Python], Gradle [Java]
 Webpack, Babel, NPM, etc
 Web Server [Apache, nginx]
Composer

Composer is a tool for

dependency management in
PHP. It allows you to declare the
libraries your project depends
on and it will manage
(install/update)

them for you

 JavaScript [npm]

 Pytho [maven, gradle]

n

 PHP [composer]

 Ruby [gem]
Server Side Technologies [pick one]

 Node.js [fast, scalable, powerfull]

 Pytho [popular, rapid development, integration]

n

 PHP [easy, practical, every body knows]

 Ruby [rapid development, strong community]

Database [choose
one]
 MongoDB [no-SQL, non-relational, recommended for Node.js]
 MySQL [free, popular, easy to use, best couple for PHP]
 PostgreSQL [powerfull but a bit difficult for beginners]
 SQL Server [microsoft support]
 Oracle [used by large enterprise, expensive]
 Firebase [cloud database maintained by Google]
Server side Framework [choose
one]
 Javascript [Express for Node.js, Hapi.js, Adonis, etc]
 Python [Django, Flask, Pylons, etc]
 PHP [Laravel, CodeIgniter, Symfony, Yii2, etc]
 Ruby [Ruby on Rails, Sinatra, Nitro, etc]
 C# [.Net Framework]
You are a Full-stack Developer!

 Create a simple to complex website [back-end and front-

end]

 Create secure REST APIs

 Deploy and maintain applications
 Administer databases

Full stack developer

Experience is a good
teacher
 Rama Adistya
Lecturer – Programmer

Univ. Ronggolawe  Kampus Unirow

Univ. Brawijaya
ramaadistyanurcahya@gmail.com
 PT Angkasa Semarang
 PT Multi Cakra Data
 Univ. Ronggolawe
 STMIK Bina Insani
 STMIK Bidakara
 STMIK Pranata Indonesia
Sebuah Proses…

BERBAGI : MEMBANGUN
JEJARING

BEKERJA : MEMBANGUN PENGALAMAN

BELAJAR : MEMBANGUN KEMAMPUAN DIRI

2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025
Belajar : Membangun Kemampuan
Diri
 Belajar : Lingkungan PHP

• Pahami konsep aplikasi berbasis web

• W ebserver
• Browser
• Client Side:
• HTML
• CSS
• Javascript
• Jquery
• Server Side: PHP
• Database: MySQL
Belajar : Editor
• Front Page
• Notepad
• Dreamweaver
• NuShere PHP ED
• Zend Studio
• Gedit
• Geany
• Sublime Text
Belajar : Dasar PHP
• Single Quote (‘) vs Double
• Hello World Quote (“)
• Variabel dan Konstanta
• Tipe Data
• Operator
• Komentar
Belajar : Dasar PHP
• Variable of Variable
• Hello World
• Variabel dan Konstanta
• Tipe Data
• Operator
• Komentar
 Belajar: Dasar PHP

• Predefined Variable
• $_GET
• $_POST
• $_FILES
• $_SERVER
• $_COOKIE
• $_SESSION
• $_REQUEST
• $GLOBALS
• $_ENV
• $HTTP_RAW_POST_DATA
 Belajar : Struktur Kondisi dan Perulangan

• Struktur Kondisi:
• IF
• IF…ELSE…
• (…)? :
• SWITCH…CASE
• Struktur
Perulangan
• FOR
• WHILE
• DO…W HILE…
• FOREACH
 Belajar : Penanganan Form

• Metode:
• POST
• GET
• Form Action
• Halaman sama
• Halaman berbeda
• Jenis-jenis inputan
Belajar : Pemrograman Dasar di
PHP
• Array • Koneksi Database
• String • Abstraction Layer DB
• Tanggal dan Waktu • mysql* vs mysqli*
• File dan Direktori • Laporan HTML
• Membuat Fungsi • Laporan PDF
• Penyimpanan • Laporan Excel
File • Laporan Grafik
• Session • dll
• Cookie
• Database
• Prosedural
• OOP-Style
Bekerja : Membangun Pengalaman
Bangun Portofolio
Berorientasi pada Hasil Terbaik
Kreatif dan
Inovatif
 Tidak boleh egois

#WebDeveloper tidak boleh

egois, tidak semua
pekerjaan bisa dikerjakan
sendiri. Bekerjalah dalam
sebuah tim
Bekerja dalam tim artinya
harus mau belajar bersama,
saling berbagi ilmu, share
pengetahuan. Demi
selesainya pekerjaan
 Bertanggung jawab

Bertanggung jawab dengan

pekerjaan yang dibebankan
kepadanya. Bagaimana pun
caranya, pekerjaan harus
dihadapi & selesaikan
Jika ada bugs dengan
program yang Anda tangani,
berusahalah sekuat tenaga
agar bugs tersebut bisa
teratasi.
 Terbuka terhadap kritik dan masukan

Terbuka terhadap kritikan,

karena tidak ada program yg
sempurna. Software without
bugs is impossible to write.
Terima kritik & masukan
sebagai bahan baku
memperbaiki pekerjaan kita,
seringkali ide justru muncul
dari orang lain.
 Memiliki etos kerja yang
kuat

Web Developer profesional memiliki etos

kerja yang kuat. Tahan banting. Jam
kerja seorang WebDeveloper tidak
seperti karyawan kantoran yang bekerja
hanya pada jam 8 pagi sampai 4 sore.
Terkadang WebDeveloper harus bekerja
melebihi jam kantoran, terutama kalau
udah dikejar deadline.
Kuncinya, hadapi dengan semangat kerja
yang tinggi, jangan menunda pekerjaan
yang bisa dikerjakan saat ini.
Link-o-pedia
.Net Framework https://
Achmatim www.microsoft.com/net
Adobe Illustrator http://achmatim.net
Adobe Photoshop https://www.adobe.com/sea/products/illustrator.html
Adonis https://www.adobe.com/sea/products/photoshop.html
AngularJS https://adonisjs.com/
Apache https://angularjs.org/
Webserver https://httpd.apache.org/
Atom Editor https://atom.io/
AWS Cloud9 https://aws.amazon.com/cloud9/
Babel JS https://babeljs.io/
Bootstrap https://getbootstrap.com/
Brackets Editor http://brackets.io/
Bulma CSS Framework https://bulma.io/
Code Igniter https://codeigniter.com/
Composer https://getcomposer.org/ https://
Django Framework www.djangoproject.com/
Dreamweaver https://
EmberJS www.adobe.com/sea/products/dreamweaver.html
Express for NodeJS https://www.emberjs.com/
Firebase https://expressjs.com/
Flask Framework https://firebase.google.com/
Foundation http://flask.pocoo.org/
Link-o-pedia
Geany Editor https://www.geany.org/
GEdit Editor https://gedit.jaleco.com/
GIMP Image Editor https://www.gimp.org/
GIT https://git-scm.com/
Google Chrome https://
Gradle www.google.com/c
Hapi.js hrome/
Laravel Framework https://gradle.org/
Materialize https://hapijs.com/
Microsoft Edge https://laravel.com/
MongoDB http://materializecss.com/
Mozilla Firefox https://
MySQL DB www.microsoft.com/en-us/windows/microsoft-edge
nginx Webserver https://www.mongodb.com/
Nitro https://www.mozilla.org/en-US/firefox/
Node.js https://www.mysql.com/ https://
Notepad+ www.nginx.com/
+ http://www.nitrojs.org
NPM JS http://nodeframework.com/
Opera Browser https://notepad-plus-plus.org/
Oracle DB https://www.npmjs.com/ https://
www.opera.com/ https://
www.oracle.com/index.html
Link-o-pedia
PHP http://www.php.net
PHP IDE http://www.nusphere.com/
PostgreSQL https://www.postgresql.org/
PureCSS https://purecss.io/
Pylons https://pylonsproject.org/
Framework https://pypi.org/ https://
PyPi Packagist www.python.org/
Python https://reactjs.org/ https://
ReactJS www.ruby-lang.org/en/
Ruby http://rubyonrails.org/
Ruby on Rails http://sinatrarb.com/
Sinatra Framework http://getskeleton.com/
Skeleton CSS https://
SQL Server www.microsoft.com/en-us/sql-server/
Sublime Text https://www.sublimetext.com/
Symfony Framework https://symfony.com/
Vim Editor https://www.vim.org/
Visual Studio Code https://code.visualstudio.com/
VueJS https://vuejs.org/
Webpack https://webpack.js.org/
WinSCP https://winscp.net/eng/download.php
Yii2 https://www.yiiframework.com/
Framewo