Thread by @omarqe

"Di mana saya patut mula belajar programming?"

Since ni soalan common yang orang tanya aku from my previous thread, so..

Dalam bebenang ni aku kongsikan macamana nak mula belajar programming untuk novice.

P/s: code di bawah ni aku tulis waktu umur 14 tahun.

Bagi orang yang dah biasa coding, baca code tu pun dia dah tau what they do hohoho. Teka lah dulu, I'll explain them at the end of this thread. 😂

Terlepas bebenang sebelum ni? Baca sini

https://twitter.com/omarqe/status/1138663844975243264?s=21

So, macamana nak belajar coding ni? Macam best je, tapi macam susah je? Tak susah sangat sebenarnya..

Apa yang aku bakal tulis ni memang totally dari pengalaman sendiri la, bukan datang dari buku atau academic research ke apa.

Thread ni tak details, aku cuma provide guidelines.

Time aku belajar coding, aku budak sekolah lagi. Jadi memang takdak pendedahan pasal coding ni kat memana.

Cikgu ICT time tu pun taktau macamana nak ajar aku IT 😂 Udemy pun belum wujud.

Aku ingat waktu tu coding ni masih tak dipandang masyarakat tempatan lagi. It was 2009.

So I decided to learn it by myself, without cikgu, solely from Google and w limited resources at that time.

So if you have 0 knowledge, me too then. Everyone was.

(waktu tu StackOverflow masih baru, soalan mungkin masih tak banyak/relatable, jadi aku taktahu benda ni wujud)

Aku share 5 points sempoi punya macamana nak belajaq programming cara omarqe 🤣

Bebenang ini akan berat kepada web dev, because I think it's the easiest. Tapi ni actually cara susah, tapi memberi kesan yang mendalamm!

Kalau nak senang, korang stop baca & pi layan Udemy sana. 😅

1. Kena set goals & objektif

Orang mai kat aku tanya "where do I start?" tapi depa taktau pasaipa depa nak belajar programming ni.

So tanya diri sendiri, korang nak belajar untuk apa?

Ada orang objektifnya nak buat website:
- HTML > CSS > PHP & SQL > JS

Ada nak buat mobile app:
- Native app = XML > Kotlin/Java & Swift/Obj. C
- Hybrid = JS > Ionic/Flutter/React Native+JSX

Nak buat game:
- C++/C#/VB/Java/Obj. C > Game Engines

Jalan paling senang adalah jalan seorang hamba yang nak buat website.

Yang nak buat mobile app or game pun boleh follow jalan ni dulu, kemudian baru move up.

Kang tetiba suggest belajar JSP melopong pulak ye temen-temen. Selain PHP boleh belajar Python, Ruby on Rails, .NET.

2. Curi (pinjam) website orang

Ni memang aku bebetul buat hohoho. Tapi aku tak publish.

Sebab resources time tu kan limited? Jadi aku kena belajar dari contoh sedia ada dan ubah ikut citarasa.

P/s: sila respect copyright, pinjam web orang sebab nak belajar, bukan untuk profit.

Benda ni lebih mudah dibuat dengan Mozilla Firefox. Save the web page (complete). Korang akan dapat HTML file and a folder belongs to it.

Untuk images macam logo ke apa, benda tu kena save manually with: Right Click > View Background Image > save dalam folder website tu..

Bukak file HTML tu guna software seperti Adobe Dreamweaver. Korang perlu real time splitview untuk belajar; so you can hover on an element to see where the code is.

Dw ni best utk beginner sebab ada small tabs untuk embedded files. Senang untuk navigate through related files..

First, you need to understand these basics:

- HTML is used to structure your web; while CSS is used to style it.
- .class in CSS is for class="class" attribute in HTML.
- #id in CSS is for id="id" attribute in HTML.

In the pictures below; CSS (left) vs HTML (right).

Alternatively, you can use Chrome's Inspect Element..

Sekarang, cobalah ubah ikut citarasa sendiri. Ubah text, ubah color, anything.

Simultaneously, cuba fahamkan syntax & semantic HTML/CSS tu. Understand how to indent and structure your codes, belajar kalau buat ni jadi apa..

Em aku saja ja buat teruk suruh korang curi website. Kahkah 🤣

Kalau nak senang, korang boleh je download sample HTML websites for free and ubah ikut citarasa korang.

Takyah curi pun takpa. Pi sini: habboemotion.com/category/fansi…

P/s: korang rugi kalau tak pernah main Habbo dulu lol.

Bagi aku, belajar dari actual sample lebih berkesan berbanding step-by-step tutorial. Cuma makan masa sikit la tapi berbaloi.

Semakin banyak korang ubah code sample tu, semakin banyak korang akan faham. Tapi ingat, HTML + CSS ni paling basic, ini cuma stepping stone sahaja.

Kebanyakan universiti intro students dengan actual programming language dulu instead of web programming.

So ramai students akan immediately benci programming bila dorang terkejut for the first time dengan kepayahan Java/C++/etc. sebab dorang tak nampak hasil code dorang.

Hikmah belajar web dulu ni is that kita immediately see the result from the codes.

This way, we can understand and fall in love with programming better.

Therefore apa yang kita belajar dalam kelas is actually more to conceptualisation/theory instead of practical knowledge.

Kat dunia ni korang akan nampak ramai developer cilik come out dengan web atau mobile apps.

Dorang ni boleh apply knowledge dorang sebab dorang belajar by practical, bukan by theory alone.

For me, bila belajar by practical, kita boleh grasp both practical and concept quickly.

So.. Dah pandai HTML+CSS? Now cuba buat first web korang sendiri. Kalau stuck, refer balik sample HTML yang korang save/download tadi.

Untuk buat layout camni, cuba fahami CSS float, clearfix, display properties.

Boleh juga coba frameworks such as Bootstrap, SemanticUI, etc.

3. Learn code indentation

Kenapa aku pilih intro dalam thread ni dengan HTML? Sebab nak ajar untuk disiplin dengan indentation ni dari awal.

Ramai aku tengok orang yang intro dengan Java selalu missed indent ni, padahal ia sgt membantu korang untuk faham code tersebut.

Tapi lama-kelamaan dorang akan jaga jugak benda ni.

We honestly can't work with people who don't really care about indentations, nomenclatures and the aesthetics of the codes. Experts can understand the code but it's just too horrendous to see 😂

Code indentation adalah sangat penting bagi setiap programmer utk improve readability. Kita biasanya gunakan 4 spaces atau satu tab untuk nested lines.

Belajar indent dari HTML dulu. Korang akan pakai lagi benda ni in languages that you're gonna learn in the future esp. Python.

Point 4 aku sambung satgi. Tengah beraya ni jap ehe 🤣

4. Setup dev environment

Kalau tadi korang main dengan HTML + CSS, aku ucap tahniah sebab korang dah selangkah menuju ke alam programmer sebenar! Kahkah.

Ada banyak languages yang korang boleh belajar dalam web programming ni. Tapi kat sini aku pilih PHP sebab paling mudah.

Bab ni agak tricky untuk aku explain kat sini, sebab titik mula aku susah sikit. Tapi aku cuba ringkaskan konsep penting seboleh mungkin supaya korang yang baca nampak arah tuju.

Pertama sekali, korang perlu setup web dev environment dulu pada laptop korang. Caranya mudah 👇🏻

Korang guna Windows? Ok, mudah je. Google XAMPP dan install je kat dalam laptop korang. Ingat di mana korang install, di situ korang akan jumpa folder htdocs.

Sebelum korang usik htdocs, open dulu application XAMPP dan start Apache & MySQL. Make sure they're both running.

Lepas dah run Apache & MySQL, korang bukak your Google Chrome, navigate to http://localhost

Korang perlu setup password database dan sebagainya di situ. Bila dah setel, bukak XAMPP folder korang and cari htdocs. Delete semua files dalam tu (aku rekemen cut letak tempat lain).

Di dalam htdocs, cuba create index.html file. Dalam file tu tulis <h1>Hello world!</h1> kemudian pergi balik ke http://localhost

Tengok apa yang korang dapat kat situ. Now, that's your dev environment. Segala file website korang kena letak dalam tu.

Kepada pengguna macOS, anda boleh juga guna XAMPP untuk mudah. Tapi aku sungguh-sungguh tak prefer XAMPP untuk macOS, aku prefer korang follow article(s) ni bit.ly/2Frg3m3

Cara ni boleh install multiple PHP versions, configure DNSMASQ, SSL & sebagainya. Ini lebih afdhal

Untuk peringkat awal ni cukuplah korang tahu macamana nak setup dev environment saja. DNSMASQ, SSL tu level advanced sikit.

Korang mungkin nak build banyak apps in the future, and might also want to use SSL certificates and so on. Tapi ini tak penting lagi di peringkat awal.

Kalau ada masalah dengan XAMPP, korang Google ye.

Aku dah lama tak guna benda tu and tak pernah configure banyak pun. So most probably aku taktahu bende sangat pasal XAMPP.

5. Belajar web programming

Sekarang baru korang boleh belajar web programming dengan tenang. Kalau tadi korang create file index.html, now korang cuba rename file tu ke index.php.

Delete everything in index.php & paste the following code:

Bukak balik Chrome and refresh balik localhost. Voila! Your first PHP code!

Now, korang perlu faham beberapa basics dalam PHP ni.
- if..else
- loop
- function
- class & function inside class

Sengaja saya tinggal error kecikk sangat pada salah satu gambar. Cobala teka yang mana?

So sebenarnya itu ja la concept yang korang perlu faham pasal programming.

Mudah kan? From this, korang boleh kembangkan lagi skills korang dengan explore more source codes!

Cuba download source codes dari WordPress.org dan lihat di mana depa apply concept di atas tu.

Tips: WordPress gets more and more complicated every single day, aku cadang korang download source codes dorang dari version yang lama-lama tu kalau nak belajar.

So far, selepas masuk universiti aku dah grasp konsep programming, dan dah bina banyak private projects.

Maka bila dorang throw new language (Java) kat aku, aku mudah sikit nak menelannya. Aku tak terkejut bewak "apahal susah sangat natang ni??"

6. Extra tips!

Dalam mencari ilmu ni, kita kena banyak bertanya. Dalam Al-Quran sendiri pun mengajar kita macamana nak belajar – bertanya kepada yang tahu!

"... maka bertanyalah kepada ahlinya, jika kamu tidak mengetahui" (16:43)

Jadi, jangan la malu/malas bertanya kalau nak belajar. Dan bila bertanya, jagalah adabnya.

Jangan la duk pi tanya orang pastu buat palatao. Jadilah seekor pipit yang baik, adab tu biar tinggi sikit daripada rumput.

Biar kita nampak bodoh sikit takpa, asal kita dapat belajar.

Penjelasan coding aku di tweet pertama.

Sebenarnya tu cuma helper functions untuk select dan update database (MySQL). Aku ni pemalas, aku malas nak tulis query pepanjang untuk common SQL statements. The whole file sangat panjang dan boleh work standalone.

Function tu ada ramai adik-beradik, ada insert, insert on duplicate, update on duplicate, insert multiple rows, delete, fetch, connect, query dan banyak lagi.

Memang codes tu asalnya dari 10 tahun lepas, tapi aku upgrade jadi lebih stable.

Setiap statement SQL seperti insert, select, update dan sebagainya, umum mengetahui bahawa kita kena escape terlebih dahulu. Helper functions ni dah setelkan semua dah untuk aku.

So aku tak perlu write long codes reptitively for those statements.

Code asalnya sebenarnya lebih outdated dan complicated. Sebab dulu aku guna mysql class biasa (which works on PHP 5).

On PHP 7+ aku terpaksa buat pengubahsuaian code sebab mysql class dah deprecated. Yang ada cuma mysqli dan PDO.

I revised the codes a few years ago.

Kalau orang tengok code tu kemas dan cantik, itu hasil daripada belajar Java waktu degree. Ya, Java allows you to understand OOP better I guess. And it makes your code looks more mature.

Akhir sekali, itu cuma sebahagian daripada custom framework yang aku bina. Aku develop framework ni untuk integrate ReactJS dan PHP seamlessly.

Selain tu, framework ni juga adapt dengan package manager seperti Composer untuk PHP dan npm untuk Javascript. So memang tak risau la kalau nak guna components luar. Teda masalah 👌🏻

Hopefully dapat manfaat dari bebenang ni. Tak mintak banyak, cuma doakan hari-hari aku lebih produktif untuk siapkan semua kerja aku! 😭

Shameless promotion (kahkah) 🤣🤣

Follow la aku, inshaAllah aku akan share banyak lagi benda menarik pasal computer science and tech in the future. Peace ✌️