Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seminar: Become a Reliable Web Programmer

983 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Seminar: Become a Reliable Web Programmer

  1. 1. Become a Reliable Web Programmer Achmad Solichin | @achmatim Tangerang, 17-18 April 2018 menjadi programmer handal era kekinian AMIK BSI Tangerang
  2. 2. Achmad Solichin Dosen - Web Developer - Trainer @achmatim Achmad Solichin achmatim@gmail.com slideshare.net/achmatim http://achmatim.net Universitas Budi Luhur, Jakarta
  3. 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. 4. web programmer = programmer yang membuat aplikasi berbasis web
  5. 5. How should we start ?
  6. 6. Choose your own path Full stack developerFront-end developer Back-end developer + =
  7. 7. 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
  8. 8. 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
  9. 9. Javascript [is not Java]  Learn Basic JS [no framework]  Data types, variable, operator, function, loop, etc.  DOM manipulation [without JQuery]  Ajax / JSON
  10. 10. 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]
  11. 11. 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
  12. 12. 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
  13. 13. 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]
  14. 14. 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]
  15. 15. 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]
  16. 16. 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
  17. 17. 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]
  18. 18. 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]
  19. 19. 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]
  20. 20. 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
  21. 21. Experience is a good teacher
  22. 22. 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
  23. 23. Belajar : Membangun Kemampuan Diri
  24. 24. Belajar : Lingkungan PHP • Pahami konsep aplikasi berbasis web • Webserver • Browser • Client Side: • HTML • CSS • Javascript • Jquery • Server Side: PHP • Database: MySQL
  25. 25. Belajar : Editor • Front Page • Notepad • Dreamweaver • NuShere PHP ED • Zend Studio • Gedit • Geany • Sublime Text
  26. 26. Belajar : Dasar PHP • Hello World • Variabel dan Konstanta • Tipe Data • Operator • Komentar • Single Quote (‘) vs Double Quote (“)
  27. 27. Belajar : Dasar PHP • Hello World • Variabel dan Konstanta • Tipe Data • Operator • Komentar • Variable of Variable
  28. 28. Belajar: Dasar PHP • Predefined Variable • $_GET • $_POST • $_FILES • $_SERVER • $_COOKIE • $_SESSION • $_REQUEST • $GLOBALS • $_ENV • $HTTP_RAW_POST_DATA
  29. 29. Belajar : Struktur Kondisi dan Perulangan • Struktur Kondisi: • IF • IF…ELSE… • (…)? : • SWITCH…CASE • Struktur Perulangan • FOR • WHILE • DO…WHILE… • FOREACH
  30. 30. Belajar : Penanganan Form • Metode: • POST • GET • Form Action • Halaman sama • Halaman berbeda • Jenis-jenis inputan
  31. 31. 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
  32. 32. Bekerja : Membangun Pengalaman
  33. 33. Bangun Portofolio
  34. 34. Berorientasi pada Hasil Terbaik
  35. 35. Kreatif dan Inovatif
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. #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
  40. 40. Berbagi : Membangun Jejaring
  41. 41. Berbagi melalui website
  42. 42. Berbagi social media
  43. 43. Berbagi melalui komunitas
  44. 44. Berbagi dengan berbagi coding
  45. 45. Berbagi melalui workshop dan seminar
  46. 46. 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
  47. 47. 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
  48. 48. 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/
  49. 49. 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.
  50. 50. Terima Kasih @achmatim Achmad Solichin achmatim@gmail.com slideshare.net/achmatim http://achmatim.net Achmad Solichin

×