Mari Cuba Web Apps yg Saya Bina Version 0.1a
Linkman Pwa - Tue 15/Jun/2021 9:42pm [Last Comment]
Setelah beberapa bulan study berkenaan website apps, akhirnya versi 0.1a siap pada hari ini.

Versi 0.1a
1) Boleh login as guest
2) boleh post topic di Test Module
3) Boleh edit topic
4) boleh delete topic
5) boleh view topic
6) then boleh logout.

Klik disini:
https://www.azmanoz.com
(jangan lupa klik pada 'guest' utk login as guest)

Selamat mencuba thehe..

Niche: Diskusi Bisnes | Web Design Malaysia
 
1. Linkman - Tue 15/Jun/2021, 10:05pm
Dua sumber utama utk version 0.1a ini adalah:

1) W3schools - How to make a website
https://www.w3schools.com/howto/howto_make_a_website.asp

2) The Net Ninja - learn php (procedural) & mysql
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gksOX3Kd9KPo-O68ncT05o  
2. Linkman Pwa - Wed 16/Jun/2021, 10:55am
cabaran2

1) w3schools mengajar cara buat website responsive yg sangat baik menggunakan cara 'css flex' .. tapi tak tahu sebab apa mereka gunakan method 'desktop first'. Saya kena tukar kpd 'mobile first'

2) kemudian Net Ninja mengajar php/mysql macamana nak masukkan data, edit dan de1ete kedalam table.. tapi masalahnya net ninja tak tunjukkan macamana cara nak login. dia buat website 'open' semua orang boleh post info, edit & de1ete. Jadi saya kena buat login system dahulu.  
3. Linkman Pwa - Wed 16/Jun/2021, 10:55am
untuk login system, saya berikan 'Acces Level'. Tujuannya supaya boleh dibezakan jenis2 users.

Saya akan gunakan konsep catur/chess utk Access Level

1) level 0 - web visitor, tak login
2) level 1 - guest login (akan di 'disable' bila apps siap nanti)
3) level 2 - pawn (level paling bawah selepas login)
4) level 3 - rook - vip
5) level 4 - knight - vvip
6) level 5 - bishop - (level admin, bawah arahan queen)
7) level 6 - queen (second power.. boleh buat semua yg king buat kecuali create/de1ete table)
8) level 7 - king (paling power, boleh create/de1ete table)  
4. Linkman Pwa - Wed 16/Jun/2021, 10:55am
cabaran:

macamana cara utk mendapatkan ID yg pendek dan kemas mcm majalah.com. setakat yg saya buat guna php uniqid() - dapat ID yg panjang mcm nih - 60C8B15DD4F59 (13 characters)

saya nak cari cara utk buat ID yg pendek - GJNXJG5G4H (10 characters sahaja).. nanti saya tanya programmer majalah.com..

buat masa ni pkp mmg tak boleh jumpa face to face.. kalo nak terangkan dlm whatsap mmg susah..  
5. Linkman Pwa - Wed 16/Jun/2021, 10:56am
cabaran utk sanitise data.. iaitu macamana nak bersihkan data yg user masukkan dan pastikan bebas dari ancaman

1) cross site scripting attack (XSS attack)
- guna php htmlspecialchars()

2) sql poison injection
- guna php mysql_real_escape_string()

3) URL ($_GET) poison injection
- guna function saya buat sendiri
- function buat sendiri - allow_alphanumeric_character_only()
- kalo user masukkan character pelik2 macam $*%! dll.. semua akan dibuang.

4) URL ($_GET) alteration
- bagaimana nak elakkan user1 dari edit user2 punya record hanya dengan menukar record ID di URL? ..yg ni saya masih dalam kajian.. tapi sangat penting dari segi securiti!! saya akan tanya programmer majalahcom..  
6. Linkman Pwa - Wed 16/Jun/2021, 10:59am
design prinsip: password hash

oleh kerana password adalah sensitive, jangan simpan password registered users dalam plain text di dalam database kerana boleh dibaca.. sebaliknya simpan dalam bentuk hash md5() yg telah ditambah ''salt'' utk menambah lagi securiti.  
7. Halal Investor - Wed 16/Jun/2021, 11:13am
php ke bos ? sy baru merangkak je php ni..
tunjuk ajar sifu..

ini pun boleh cuba

echo substr(md5(time()), 0, 10);  
8. Linkman - Fri 18/Jun/2021, 9:50am
OK Tuan Halal Investor.. saya akan try.. Trima Kasih Tuan.  
9. Linkman - Fri 18/Jun/2021, 9:53am
Cabaran: Navigation bar/menu

banyak hari dihabiskan utk mencari penyelesaian navbar yg sesuai.. kalo nak cari yg pure css3/html5 memang susah dan banyak solution yg memerlukan javascript atau jquery..

solution... akhirnya saya tak pilih mana2 pun.. saya buat sendiri dengan modify w3schools punya navbar dan combine dgn basic php page sahaja.. lagi senang nak program.. tak memerlukan javascript.  
10. Linkman Pwa - Sat 19/Jun/2021, 9:49am
Todo/Challenges: To create/alter table within apps without using phpmyadmin.

Saya dapati utk create dan modify database & table menggunakan phpmyadmin agak slow.. terpaksa toggle between coding & phpmyadmin.. terutama sekali kalau dah upload ke webhosting.. nak login ke cpanel pulak mmg leceh..

solution:

1) first round create field wajib sahaja
- autoincrement number
- record id
- user id
- registered timestamp
- last update timestamp

2) everytime new fields are required.. we must be able to do so within the apps itself using the highest admin level (king = level 7)  
11. Linkman Pwa - Sat 19/Jun/2021, 9:50am
problem solved: masalah timestamp (waktu) di server dan laptop di rumah tidak sama

solution dgn menggunakan php default timezone function:
date_default_timezone_set('Asia/Kuala_Lumpur');

problem 2 solved: server timestamp
===============

kadang2 saya taknak timestamp dgn latest date tapi sebab record database (mysql) jenis timestamp.. update berlaku juga secara automatik. penyelesaiannya adalah buang property timestamp di mysql dan update sendiri menggunakan date() function bila perlu sahaja.

- gunakan php function date(''Y-m-d~H:i:s'')  
12. Linkman Pwa - Sat 19/Jun/2021, 10:02am
design principle:

1) Model View Controller (MVC)
Biasanya kesemua expert akan suggest membuat pengasingan diantara Model, View & Controller. ini memang cara terbaik terutama utk software yg mempunyai berpuluh2 atau beratus2 programmer (dan bajet USD juta2)

2) Separation of Concern
Oleh sebab apps ini kecil sahaja, saya memilih cara lain iaitu ''Separation of Concern''. Cara saya berbeza sikit dimana programmer lain menakrifkan 'concern' sebagai jenis code yg sama iaitu css, php atau javascript.

Saya menakrifkan ''separation of concern'' berdasarkan jenis segment tersebut.. adakah ianya header? atau navbar? atau content? atau footer? atau database schema? concern yg sama dimasukkan kedalam file yg sama supaya mudah utk dicari apabila saya perlu mengajar staff baru programmer utk maintain software ini nanti.

ia tidak melanggar coding principle asas sebab bila check di Google Lighthouse utk code verification tak ada keluar error.. semua tick hijau.  
13. Linkman Pwa - Sat 19/Jun/2021, 10:05am
design principle: html-first atau php-first?

1) html first - keutamaan code diberikan kepada html dan php hanyalah diselit di dalam html tags

2) php first - keutamaan diberikan kepada PHP dahulu dan html hanya diselitkan didalam php code. (banyak menggunakan fungsi 'echo' tapi saya dapati code lebih kemas). saya pilih cara ini.  
14. Linkman - Sat 19/Jun/2021, 10:22pm
Problem insert record: bila user tekan back button dan resubmit.. terjadinya duplicate record berulang2..

Solution: setiap cubaan utk insert record baru mesti diberikan ROW_ID yg unik di dalam URL ($_GET) dan jika user tekan back button dan resubmit.. tiada rekord duplicate akan berlaku.

Untuk securiti:
Setiap row_id perlu disertakan dgn 'KEY' iaitu password khas utk ROW_ID itu sahaja. Jika user cuba menukar ROW_ID utk hijack rekod kepunyaan orang lain.. key tersebut tidak match dan update fail.

Penghasilan KEY perlu dibuat dengan teliti menggunakan hash md5() disertakan SALT yg berubah2 setiap kali user login.

Ini memastikan tidak ada sesiapa boleh meneka KEY utk rekod orang lain dan jika user copy paste URL orang lain beserta ID/KEY yg betul pun masih tak boleh verified.

Bonus:
solution ini dapat menyelesaikan masalah dalam comment nombor 5 diatas (cabaran ke 4 - URL alteration).  
15. Linkman Pwa - Sun 20/Jun/2021, 9:01am
Assumption wajib: screen width utk programmer

programmer yg maintain software ini wajib menggunakan laptop atau screen desktop lebih besar. setiap line code yg dibuat lebih kurang lebar laptop iaitu sekitar 1300px. cubaan utk edit code menggunakan smartphone adalah tidak optimum dan tak sesuai.  
16. Linkman Pwa - Tue 22/Jun/2021, 9:51am
Test menggunakan google lighthouse untuk azmanoz.com semua hijau.

klik disini:
https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fazmanoz.com

100% - Performance
93% - Accessibility
100% - Best Practices
91% - SEO
Progressive Web Apps (PWA) - N/A

Google Lighthouse is an open-source, automated tool for measuring the quality of web pages.

Nota:
Saya masih belum masukkan ciri2 PWA (service worker, manifest jason dll)  

Page 1   (Total 16 comments)
Your Comment: Max 1000 characters.
Login Email:
Password:
Tips: Free Registration ¤ Lost Password?
Warning!
1. NEVER give UPFRONT PAYMENT (deposit) to any Money Lenders. Upfront Payment is 100% scam!
2. NEVER give advance payment to sellers you don't know or sellers with no office/home address.
3. NEVER pay for any products or services with CASH except for C.O.D!
4. Majalah.com NEVER send any business offers to anyone and we never offer our users' details for sale.
Disclaimer. Messages posted to our forum are solely the opinion and responsibility of the person posting the message. We assumes absolutely no responsibility for any loss (time/money/energy) as a result of using the information posted in this forum. We do not endorse, support, represent or guarantee the truthfulness, accuracy or reliability of any topics/messages posted here. We reserve the right to delete or edit your topics or comments. Your visiting of this site shall be deemed as your acceptance of this disclaimer.