Materi Seminar dengan tema "Become a Reliable Web Programmer" yang diselenggarakan di AMIK BSI Tangerang pada Tanggal 17-18 April 2018.

1. Become a Reliable Web
Programmer
Achmad Solichin | @achmatim
Tangerang, 17-18 April 2018
menjadi programmer handal era kekinian
AMIK BSI Tangerang

2. Achmad Solichin
Dosen - Web Developer - Trainer
@achmatim Achmad Solichin achmatim@gmail.com
slideshare.net/achmatim http://achmatim.net
Universitas Budi Luhur, Jakarta

3. 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.

4. web programmer = programmer yang membuat aplikasi berbasis web

5. How should we start ?

6. Choose your own path
Full stack developerFront-end developer Back-end developer
+ =

9. Tools and Software
Code Editor
 AWS Cloud9
 Visual Studio Code
 Sublime Text
 Brackets
 Vim
 Atom
 Notepad++
Good Browser
 Mozilla Firefox
 Google Chrome
 Microsoft Edge
 Opera
Image Editor
 Adobe Photoshop
 Adobe Illustrator
 GIMP
Development Tools
 SSH
 GIT
 WinSCP
 Composer
 FTP Client
 DB Client

10. 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

11. Javascript [is not Java]
 Learn Basic JS [no framework]
 Data types, variable, operator, function, loop,
etc.
 DOM manipulation [without JQuery]
 Ajax / JSON

12. Deploying an online website
Domain and hosting
[start from IDR 10k /month]
Learn basic CPanel
[creating subdomain,
email, file manager, FTP account, etc]
Uploading file and database
[via Cpanel or FTP]

13. Front-end Dev Basic Skills
 Build simple websites & UIs [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

14. 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

15. HTML / CSS Framework [pick one]
Materialize CSS
[responsive, material design]
Twitter Bootstrap
[easy, most popular]
Foundation
[advanced, responsive]
Skeleton
[a lightweight boillerplate]
Bulma
[easy to learn syntax, no JS]
Pure CSS
[small and responsive]

16. 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]

17. 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]

18. 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

19. Server Side Technologies [pick one]
 Node.js [fast, scalable, powerfull]
 Python [popular, rapid development, integration]
 PHP [easy, practical, every body knows]
 Ruby [rapid development, strong community]

20. Database [choose one]
 MongoDB [NoSQL, 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]

21. 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]

22. 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

23. Experience is a good
teacher

24. Sebuah Proses…
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016
BELAJAR : MEMBANGUN KEMAMPUAN DIRI
BEKERJA : MEMBANGUN PENGALAMAN
BERBAGI : MEMBANGUN
JEJARING

25. Belajar : Membangun Kemampuan Diri

26. Belajar : Lingkungan PHP
• Pahami konsep aplikasi berbasis web
• Webserver
• Browser
• Client Side:
• HTML
• CSS
• Javascript
• Jquery
• Server Side: PHP
• Database: MySQL

27. Belajar : Editor
• Front Page
• Notepad
• Dreamweaver
• NuShere PHP ED
• Zend Studio
• Gedit
• Geany
• Sublime Text

28. Belajar : Dasar PHP
• Hello World
• Variabel dan Konstanta
• Tipe Data
• Operator
• Komentar
• Single Quote (‘) vs Double
Quote (“)

29. Belajar : Dasar PHP
• Hello World
• Variabel dan Konstanta
• Tipe Data
• Operator
• Komentar
• Variable of Variable

30. Belajar: Dasar PHP
• Predefined Variable
• $_GET
• $_POST
• $_FILES
• $_SERVER
• $_COOKIE
• $_SESSION
• $_REQUEST
• $GLOBALS
• $_ENV
• $HTTP_RAW_POST_DATA

31. Belajar : Struktur Kondisi dan Perulangan
• Struktur Kondisi:
• IF
• IF…ELSE…
• (…)? :
• SWITCH…CASE
• Struktur Perulangan
• FOR
• WHILE
• DO…WHILE…
• FOREACH

32. Belajar : Penanganan Form
• Metode:
• POST
• GET
• Form Action
• Halaman sama
• Halaman berbeda
• Jenis-jenis inputan

33. Belajar : Pemrograman Dasar di PHP
• Array
• String
• Tanggal dan Waktu
• File dan Direktori
• Membuat Fungsi
• Penyimpanan File
• Session
• Cookie
• Database
• Prosedural
• OOP-Style
• Koneksi Database
• Abstraction Layer DB
• mysql* vs mysqli*
• Laporan HTML
• Laporan PDF
• Laporan Excel
• Laporan Grafik
• dll

34. Bekerja : Membangun Pengalaman

35. Bangun Portofolio

36. Berorientasi pada Hasil Terbaik

37. Kreatif dan Inovatif

38. 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

39. 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.
Bertanggung jawab

40. 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.
Terbuka terhadap kritik dan masukan

41. #WebDeveloper 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.
Memiliki etos kerja yang kuat

42. Berbagi : Membangun Jejaring

43. Berbagi melalui website

44. Berbagi social media

45. Berbagi melalui komunitas

46. Berbagi dengan berbagi coding

47. Berbagi melalui workshop dan seminar

48. Link-o-pedia
.Net Framework https://www.microsoft.com/net
Achmatim http://achmatim.net
Adobe Illustrator https://www.adobe.com/sea/products/illustrator.html
Adobe Photoshop https://www.adobe.com/sea/products/photoshop.html
Adonis https://adonisjs.com/
AngularJS https://angularjs.org/
Apache 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/
Django Framework https://www.djangoproject.com/
Dreamweaver https://www.adobe.com/sea/products/dreamweaver.html
EmberJS https://www.emberjs.com/
Express for NodeJS https://expressjs.com/
Firebase https://firebase.google.com/
Flask Framework http://flask.pocoo.org/
Foundation http://foundation.zurb.com

49. 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://www.google.com/chrome/
Gradle https://gradle.org/
Hapi.js https://hapijs.com/
Laravel Framework https://laravel.com/
Materialize http://materializecss.com/
Microsoft Edge https://www.microsoft.com/en-us/windows/microsoft-edge
MongoDB https://www.mongodb.com/
Mozilla Firefox https://www.mozilla.org/en-US/firefox/
MySQL DB https://www.mysql.com/
nginx Webserver https://www.nginx.com/
Nitro http://www.nitrojs.org
Node.js http://nodeframework.com/
Notepad++ https://notepad-plus-plus.org/
NPM JS https://www.npmjs.com/
Opera Browser https://www.opera.com/
Oracle DB https://www.oracle.com/index.html

50. Link-o-pedia
PHP http://www.php.net
PHP IDE http://www.nusphere.com/
PostgreSQL https://www.postgresql.org/
PureCSS https://purecss.io/
Pylons Framework https://pylonsproject.org/
PyPi Packagist https://pypi.org/
Python https://www.python.org/
ReactJS https://reactjs.org/
Ruby https://www.ruby-lang.org/en/
Ruby on Rails http://rubyonrails.org/
Sinatra Framework http://sinatrarb.com/
Skeleton CSS http://getskeleton.com/
SQL Server https://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 Framework https://www.yiiframework.com/

51. Referensi
• http://php.net
• https://www.airpair.com/php/posts/best-practices-for-modern-
php-development
• http://www.zend.com/en/resources/php7_infographic
• https://blog.feryn.eu/php-7-is-now-available-new-features-
improvements/
• https://www.youtube.com/watch?v=Zftx68K-1D4
• Buku Pemrograman Web dengan PHP dan MySQL
• Beberapa gambar diambil melalui situs pencari Google.

52. Terima Kasih
@achmatim Achmad Solichin achmatim@gmail.com
slideshare.net/achmatim http://achmatim.net
Achmad Solichin