Memaparkan catatan dengan label Tutorial. Papar semua catatan
Memaparkan catatan dengan label Tutorial. Papar semua catatan

CARA MUDAH BUAT WEBSITE SENDIRI

Hi, 

Dah banyak artikel cara buat website sendiri. Tetapi kadang-kadang terlalu panjang untuk dihadam. Jadi, untuk artikel pertama saya di sini, saya akan kongsikan cara buat website sendiri yang lebih mudah dan ringkas. Supaya lebih mudah faham.


2 CARA BUAT WEBSITE SENDIRI

1) 100% FREE

2) Buat Website Berbayar


Kita mulakan dengan cara pertama iaitu buat website sendiri secara percuma sepenuhnya. 

1) Pertama sekali anda taipkan 000webhost di google.

2) Sign up gunakan email anda

3) Selepas itu verify email anda dan log in ke 000webhost

4) Akan ada 3 pilihan untuk anda buat website iaitu: Wordpress; Upload file (Coding); Website Builder

5) Pilih install wordpress

6) Tadaa... wordpress website anda dah siap. Sekarang anda hanya tinggal cari template wordpress yang anda berkenan. Dan tambahkan konten anda sahaja.

7) Senang je kan? Di bawah ni saya kongsikan juga satu website demo yang saya dah buat secara percuma sepenuhnya. Bezanya saya menggunakan pilihan kedua iaitu ‘upload file(coding):

https://muhafdemo.000webhostapp.com/software/

Kalau anda nak belajar sikit-sikit coding boleh juga ke facebook ini: 

https://m.facebook.com/codingmalaysia/




CARA KEDUA: BUAT WEBSITE BERBAYAR

Maksud buat website sendiri berbayar adalah apabila anda menggunakan hosting dan domain berbayar. Perkara normal bagi website yang professional akan pastinya ada dua perkara ini yang berbayar:

1) Hosting

2) Domain


Hosting berbayar biasanya lebih dipercayai berbanding hosting percuma dari segi support. Manakala domain berbayar akan memastikan alamat website anda senang dibaca. Contohnya www.senang.com bukannya www.senang.000webhostapp.com


Untuk buat website sendiri menggunakan domain sendiri dan hosting berbayar, ini step yang perlu anda buat:

1) Taip ‘jimathosting’ di google

2) Beli salah satu pakej. Untuk jimat mungkin boleh pilih pakej ‘shared hosting’

3) Selepas dah beli, log in menggunakan ID dan Password yang diberikan.

4) Pilih di bahagian bawah ada tertera simbol ‘wordpress’. Klik wordpress tersebut dan install.

5) Tadaa.. wordpress anda dah siap di install. Anda hanya perlu pilih template yang sesuai dan update konten sendiri.

6) Anda juga ada pilihan yang sama jika tidak ingin menggunakan wordpress. Iaitu pilihan buat website dengan upload file(coding) atau menggunakan website builder.


Baiklah itu sahaja perkongsian ringkas saya buat masa ini. Saya biarkan ringkas supaya anda boleh buat terus. Cuba kongsikan di komen jika anda dah berjaya buat website sendiri secara percuma atau berbayar.


Moga berjumpa lagi.


-Muhaf-



Senangnya nak register i-akaun epf online sekarang...

Aku sebenarnya dah lama nak register i akaun epf online ni. Tapi disebabkan perangai diri yg suka melengahkan masa, sampai kesudah tak buat-buat. So semalam aku ingat nak print statement epf je kat cimb. Sekali cimb punya machine epf tu diorang dah update baru kot....

Dashboard epf i akaun online
Letak je ic dan thumbprint kat situ for the first time...., terus dia registerkan i akaun epf online untuk korang. Simple dan mudah. Thanks la akak cimb tu tolong aku semalam. Kalau tak mungkin blur jugak aku...

Korang mesti ada yang masih tak buat lagi kan i akaun epf online ni? Takyah tipu la... padahal dah bertahun2 kerja sampai simpanan dalam epf pun tak tahu sebab tak tahu update terkini. Sebab tu kena ada i akaun epf online ni. Senang nak check. Nak buat urusan apa2 pun senang. Biasa kalau nak beli rumah atau nak buat pinjaman ke memang statement epf ni antara benda penting yang akan diminta la...

Contoh summary epf statement. Dividen kosong sebab ini summary tahun 2019

So ni aku bagitahu cara paling mudah nak register i akaun epf online tanpa perlu pergi kiosk atau kaunter epf.


CARA MUDAH REGISTER I-AKAUN EPF ONLINE

  1. Korang pergi cimb terdekat yang ada epf machine tu. Then masukkan ic korang.
  2. Lepas tu nanti buat thumbprint dan register no phone korang. Lepas tu settle.
  3. Nanti machine akan print satu kertas mention i-akaun epf online korang dah register dan password sementara akan terus masuk dalam sms kat phone.
  4. So kalau korang nak print statement epf direct, korang masukkan je lagi sekali ic. Then pilih nak print statement tahun bila.
  5. Thumbprint lagi sekali then print je. Settle. Dah ada statement hardcopy epf.
  6. Ok lepas tu korang pergi balik rumah bukak laptop/pc korang.
  7. Pergi website i akaun epf ahli dan masukkan id dan password sementara.
  8. Biasanya id adalah no ahli kwsp korang. Password sementara pulak tadi dia dah hantar sms kat phone.
  9. So korang masukkan je id dan password tu. Nanti akan kena tukar password baru jugak. Id pun boleh tukar mengikut citarasa korang.
  10. Done. So korang dah boleh check statement online dah lepas ni. Just pergi website epf je dan pilih i-akaun ahli.
  11. Statement epf boleh tengok, calculator nak kira berapa anggaran simpanan korang di hari tua pun ada.
  12. Korang boleh tengok berapa dividen tahun lepas. Boleh jugak tengok akaun epf korang jenis konvensional atau jenis shariah.
  13. Yang aku suka interface epf dah makin lawa pulak hari ni. Makin moden.

KALKULATOR SIMPANAN PERSARAAN 

Contoh caculator retirement. Tengok aku punya basic saving tu pun tak cecah lagi.
So kira gaji aku tak cukup lagi untuk dapat simpanan persaraan yang ideal.

STATUS SIMPANAN EPF SHARIAH ATAU KONVENSIONAL

Boleh pergi kaunter EPF untuk apply simpanan EPF shariah

LAIN-LAIN PERKHIDMATAN EPF SECARA ONLINE

Ada beberapa lagi perkhidmatan lain yang korang boleh buat online je..

JUMLAH PENGELUARAN EPF YANG LAYAK DIGUNAKAN

Boleh guna duit EPF untuk tujuan seperti perkara2 di atas. Amaun yang layak digunakan pun ada.
Cuma untuk haji tu boleh keluarkan untuk cover belanja asas sahaja.  

So tu je lah aku nak share. Mungkin korang ada yang dah tahu kot pasal ni. Tapi aku rasa macam benda baru untuk aku, so aku share. Sebab sebelum ni machine epf tu yang aku tahu cuma boleh print statement je. Rupa- rupanya dah boleh register untuk i akaun epf online sekali sekarang. Padahal pagi semalam tu aku dah plan nak call epf dah untuk register. Siap buat alarm lagi. Haha... Tak sangka Allah mudahkan urusan aku dapat settlekan benda ni kat bank je. Alhamdulillah...

Selamat menyambut nuzul quran guys!
Salam Ramadhan..

* Rasa macam simpanan epf aku tak banyak pulak. Korang rasa benda yang sama ke eh?


Baca lagi:





Cara buat show/hide link pada entri blog

Salam.

Pernah rasa macam nak sembunyikan sebahagian dari isi kandungan entri/post korang supaya entri nampak lebih kemas dan lebih pendek? Atau korang berniat nak jadikan entri lebih interaktif?


Tutorial 4: Buat laman web guna notepad (hosting website)

Salam.

Kalau terasa nak buat website atau laman web guna notepad secara percuma, korang boleh baca entri ni.

Sumber gambar

Sebelum ni aku ada kongsikan tutorial cara2 nak buat website atau laman web guna notepad seperti di entri-entri berikut:

Tutorial 1: Buat website guna notepad (html)
Tutorial 2: Buat website guna notepad (html dan css)
Tutorial 3: Buat website guna notepad (navigation menu)

Kesemua tutorial aku kat atas ni tersangatlah basic sebab aku pun tak terror sangat pasal coding2 ni. Jadi, mungkin ada sesetengah di antara korang yang dah tahu lama dah apa yang aku sampaikan kat tutorial2 tu. Aku tahu ramai programmer2 yang hebat kat Malaysia ni. Aku buat tutorial ni pun saja2 je nak biar aku boleh refer balik bila2 masa nanti di samping dapat membantu orang lain yang tak tahu sangat pasal coding2 ni.

Jadinya, aku up la entri tutorial2 tersebut dengan harapan aku boleh refer balik kalau2 aku lupa benda yang aku dah belajar ni. Tak sangka pulak ada jugak orang yang terbaca dan rasa tutorial2 tu sangat membantu. Happy jugak la aku rasa bila apa yang aku buat ni membantu orang lain. Ye la...aku ni memang jenis yang suka tolong orang kan. Kalau dapat tolong orang tu....pehhh tak tau la nak cakap apa dia punya happy tu.... Kalau orang yang addicted dengan kerja tu orang gelar 'workaholic', aku pulak 'helpoholic' la.... Wuahahahah....ayat kau bro ley, tak nak kalah...

Ok2...enough! Untuk buktikan aku seorang helpoholic, makanya aku akan membantu, membantu lagi dan terus membantu. Hehe.....Kali ni tak banyak pun yang aku nak sampaikan. Kalau nak ikutkan, tutorial2 aku yang sebelum ni tu belum ada ajar lagi cara2 untuk upload coding yang dah siap tu pada web host/server. Aku cuma ajar cara2 nak save file kepada .html dan navigate website korang tu secara offline. Jadi, kali ni aku akan ajar macam mana nak bagi apa yang korang dah buat tu menjadi website yang real, berfungsi secara online dan boleh diakses oleh semua orang.

Yang paling penting cara ni free. Aku rasa ramai yang nak tahu benda ni.  Sebab free kan...siapa tak nak....  Sebab aku dulu pun google jugak "cara2 nak buat website percuma", "How to make website for free", dan macam2 lagi. Last2 aku buat blogspot je. Free jugak kan. Kahkah....
Ok start je la tutorial...Banyak pulak aku merapu.

Let's begin.

Pernah dengar 000webhost.com? Kalau nak buat website sendiri dengan percuma kena sign up kat website ni dulu.

1) Sign up account korang kat 000webhost.com. Nanti akan keluar macam kat bawah ni korang isi la apa yang patut, (pilih free subdomain):


2) Lepas dah sign up, tunggu email dari diorang untuk aktifkan account.

3) Buka email korang dan klik pada link yang diberikan untuk aktifkan account.

4) Lepas klik, account korang akan aktif. Dan boleh la log in ke 000webhost.com


5) Lepas log in, akan keluar macam kat bawah ni. Klik pada 'Go to CPanel'.

6) Kemudian, klik pula pada ' File Manager'.


7) Lepas klik akan keluar macam kat bawah ni. Username korang akan diberitahu pada email dan biasanya kalau dah log in ianya akan automatik keluar kat field 'username' :


8) Dah isi username dan password, klik 'continue', maka akan keluar la macam kat bawah ni. Kemudian, klik pula pada folder 'public.html' :

File manager 000webhost
9) Lepas tu akan keluar macam ni pulak:

Ni kat file manager aku. Kalau korang baru buat akan ada file 'defaul.php'
10) Kalau kat atas ni, 'index.html' tu file yang aku baru upload sendiri. Kalau korang yang baru je buat account, akan ada satu file 'default.php'. Korang kena delete file 'default.php' tu dulu dan gantikan dengan file html korang sendiri.

11) Kalau nak upload coding2 yang ada pada notepad korang tu, save dulu file sebagai 'index.html' kemudian baru la upload. Make sure upload ke dalam folder 'public.html'.

Klik upload dan upload la file index.html korang sendiri

12) Kalau macam aku, aku gunakan kod seperti pada tutorial 3: Buat website guna notepad (navigation menu) dan save as 'index.html'. Ini kod dia:


<html>
      <head>
          <title>Website caspositif</title>
      </head>
<body>
    <h>Selamat datang ke website saya!</h><br>
      <ul>
        <li><a href="http://caspositif.blogspot.com/">Home</a></li>
        <li><a href="#">Post</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Contact</a></li>
      </ul><br>

    <p1>Ini tutorial ke-3 buat website guna notepad</p1><br>
    <p2>Tutorial kali ni kita belajar buat menu yang interaktif!</p2>
</body>

  <style>

      ul{list-style:none;}
      ul li{display:inline-block;text-align:center;}
      ul li a{text-decoration:none;font-size:20px;color:white;
      background-color:grey;display:block;width:120px;height:30px;}
      ul li a:hover{background-color:brown;}

      h{font-size:40px;color:white;padding-left:40px;}
      body{background-color:green;}
      p1{font-size:18px;color:white;position:relative;top:40px;padding-left:50px;}
      p2{font-size:25px;color:black;position:relative;top:80px;padding-left:50px;}

  </style>
</html>



14) Kalau korang dah upload file 'index.html', file manager korang akan jadi macam ni:


15)....Ini bermakna korang dah siap buat website sendiri menggunakan notepad secara percuma. Dan korang juga boleh teruskan menambah baik design website korang yang sedia ada tu dengan mengedit beberapa kod selepas ini.

16) Ohhh..bukan tu je, sekarang orang lain pun dah boleh akses ke website yang korang baru buat tu. Takde la korang syok sendiri je.  Tak percaya yang orang lain pun boleh akses website korang??? Kalau korang tak percaya, korang boleh akses website yang aku baru buat ni:

caspositif.site88

17) Dah siap. Korang boleh la happy dengan website baru korang tu dan boleh la gelakkan website aku yang terlawa dalam dunia tu . kahkah... (nanti aku free, aku sambung tutorial ni bagi lawa sikit design website aku yang statik tu)

Selamat mencuba!
Semoga korang beroleh manfaat daripada entri ini dan korang berjaya menjadi programmer yang hebat. Wuahahhah...
Salam.

Tutorial: Cara install windows 10 guna pendrive

Salam.

Aku baru je lepas upgrade laptop aku ke windows 10. Boleh tahan la dia punya features semua. Lebih user-friendly dari windows 8 untuk pengguna desktop. Siapa2 yang belum tahu lagi, ni aku nak bagitau yang sekarang windows 10 dah available sejak 29/7 hari tu. Btw, senang je nak upgrade ke windows 10 ni. Tapi kena windows ori la, kalau pirate aku tak tahu boleh ke tak, tak pernah cuba lagi.


Tutorial 3: Buat laman web guna notepad

Ok, untuk tutorial kali ini aku akan ajar macam mana nak buat menu yang interaktif pada website menggunakan notepad. Sebelum tu rujuk dulu tutorial 1 dan tutorial 2 supaya mudah sikit nak faham untuk tutorial kali ini.


Kali ni aku akan mengajar satu lagi elemen dalam html iaitu <ul>……</ul>, <li>…..</li> dan <a href=”#”>……..</a>. Nak tahu apa semua ni, buka notepad korang dan isikan kod seperti di bawah:


Nampak tak ada penambahan kod <ul>…</ul> tu? Tu la kod bagi navigasi menu pada website korang. Lepas tu yang <li>….</li> tu pulak boleh dianggap sebagai list untuk menu. Maksudnya, apa yang patut ada pada menu la. Manakala yang <a href=”#”>…..</a> tu pulak adalah hypertext reference, bermaksud perkataan yang boleh diklik dan akan dilinkan kepada halaman yang lain atau url yang lain. Secara ringkas macam ni:

<ul>…</ul> ialah kod bagi navigasi menu
<li>….</li> ialah list atau perkara2 yang patut ada pada menu
<a href=”#”>…..</a> ialah kod bagi link yang boleh ditekan untuk ke halaman yang lain.

Lepas korang dah masukkan kod di atas, ini la hasilnya:

Nampak tak dah ada senarai menu pada website anda.

Ok…sekarang tambah pula kod pada bahagian <style>……</style> untuk <ul>….</ul>:

ul{list-style:none;} bermaksud untuk membuang bullet list pada menu tersebut supaya website kelihatan lebih kemas. ul merujuk kepada menu tersebut.

Untuk kod di atas aku ada ubah pada bahagian <li><a href=”#”>Home</a><li> kepada <li><a href=”http://caspositif.blogspot.com/”></a>. Ini bermaksud apabila korang tekan ‘Home’, korang akan dibawa ke halaman blog ini.

 Dan lagi satu aku ada tambah pada bahagian <style> untuk h, p1 dan p2 tu benda ni: {padding-left: 40px;}. Padding tu kalau nak diikutan maksudnya mendayung. Jadi {padding-left:40px;} membawa maksud yang  h,p1 dan p2 akan berdayung ke arah kiri dan menyebabkan ia bergerak ke kanan. Aku tambah kod ni nak biar header dan paragraph bergerak ke kanan sedikit. Maka website korang akan jadi macam ni:


Bullet pada menu akan hilang. Ok….seterusnya tambah kod ini:


ul li{display:inline block;} bermaksud menu akan disusun secara melintang, bukan lagi seperti list tadi.
ul li{text-align:center;} bermaksud perkataan pada menu tersebut akan diletakkan di tengah2 setiap blok menu.

Website korang akan jadi camni:


Nampak tak? Menu disusun secara melintang bukan lagi menegak. Ok …selepas tu tambah kod ni pula:


ul li a{text-decoration:none;} akan membuang garisan pada perkataan, bermaksud segala format pada perkataan akan dihilangkan.
ul li a{display:block;} bermaksud menunjukkan blok pada menu.
ul li a{width:120px;height:30px;} adalah untuk menentukan tinggi dan lebar blok tersebut.

Website akan jadi macam ni pulak:


Ok…last sekali tambah kod ni pulak:


ul li hover:a{background-color:brown;} bermaksud warna latar belakang blok akan menjadi coklat jika dihalakan dengan cursor mouse.

Jadi, website akan jadi begini:


Sekarang website korang dah jadi lebih interaktif. Korang boleh la cuba buat mengikut citarasa korang sendiri kalau korang nak warna latar belakang tu jadi warna lain ke. Ikut suka korang la nak letak warna apa. Cukup la setakat ini...lain kali aku sambung lagi,


Tutorial 2: Buat website guna notepad

Dah rasa teruja nak buat website bila belajar kat sini. Ok…kali ni aku nak sambung tutorial kedua buat website guna notepad (for beginners). Sebelum aku dah ajar cara nak buat title dan kandungan dalam website, hari ni aku nak ajr pulak macam mana nak mencantikan sikit website membosankan hitam putih yang orang buat tu. Kita akan tambah warna latar belakang dan besarkan tulisan serta susun tulisan. Oh….kali ni aku ajar Bahasa CSS untuk cantikkan website ni. Ok,let’s begin.
First sekali, buka notepad yang korang dah isi kod html tu. Lepas tu tambah kod berikut:



Nampak tak kod apa yang lain daripada entri sebelum ni? Kali ni yang paling penting tambah kod <style>….</style> tu dulu. Ni la kod CSS yang korang akan guna untuk cantikkan website.
Ok.dah faham? Kita teruskan dengan h{font-size:40px;}. Ini ialah elemen dalam kod CSS. Maksud kod tersebut ialah

h{font-size:40px;} bermaksud h merujuk kepada header, font-size merujuk kepada elemen tulisan tersebut iaitu saiz tulisan.

color:white; bermaksud tulisan untuk header akan jadi warna putih.

body{background-color;} bermasud warna latar belakang isi kandungan website. body merujuk kepada isi kandungan website. background-color merujuk kepada warna latar belakang. Cuba korang masukkan kod ni dan lihat hasilnya.


Ok…sekarang tambah sikit lagi. Kita akan tambah paragraph. Tambah kod seperti berikut:


Nampak <p1>…..</p1> dan <p2>….</p2> tu? Tu pulak kod html unutk paragraph. Jadi, p1 ialah perenggan satu dan p2 ialah perenggan dua. Ingat….! Setiap kali nak tambah elemen pada kod html sebaiknya tambah <br>. <br> bermaksud break. Jadi, tak adalah tulisan tu nanti bertindih ke serabut ke…

p1{position:relative;} bermaksud kedudukan paragrapah tersebut boeh berubah-ubah. Ini penting kalau orang nak ubah kedudukan paragraph.

{top:40px;} menentukan kedudukan paragraph pada isi kandungan website. Ingat perlu tambah kod {position:relative;} dulu, baru kedudukan paragraph akan berubah.

Manakala p2{….} adalah sama seperti p1{…} Cuma aku tuar waran tulisan shaaja menjadi hitam.Ingat sebelum tambah paragraph, letak kod <br> dulu pada kod paragraph sebelumnya seperti gambar di atas. Dah siap masukkan semua kod, lihat hasilnya:


Senang kan? Sekarang website korang nampak la cantik sikit.Korang boleh la buat warna latar belakang lain ke ikut citarasa masing2. Selamat mencuba. Ada apa2 boleh tanya di ruangan komen. 

Lihat tutorial seterusnya.
Lihat juga tutorial pertama.

Tutorial: Buat laman web guna notepad

Kali ni aku nak post untuk sesiapa yang minat mengenai programming. Kalau korang memang tak pernah tahu mengenai programming language tapi minat dengan programming, post kali ni memang sesuai untuk korang. Sebab apa yang aku nak sampaikan ni cuma basic coding dan cara2nya. Sebagai permulaan, laptop korang mestilah ada :

1.notepad
2.browser(google chrome sebaiknya)


Korang tak perlu ada internet pun untuk buat laman web sebagai permulaan. Kalau tahu html dan css pun dah cukup sebagai permulaan. Jadi, kali ni aku ajar macam mana nak buat website guna html sahaja dulu.

1. Buka aplikasi notepad pada komputer.
2. Isi template berikut:
     


Ok. cuba korang isi dulu kod html ni dalam notepad, lepas tu save sebagai html. Macam mana nak save as html? Taip nama file diikuti dengan .html
Contoh taip macam ni: website.html

Dah save korang boleh lihat sendiri hasilnya. Korang akan lihat laman web memaparkan "Selamat datang ke website saya!"



Fungsi:
<head> dan <title>: sebagai tajuk pada tab browser korang
<h> : adalah heading pada isi kandungan website
<body>: ruang untuk isi kandungan website. segala apa yang korang letak di antara<body> dan   </body> akan jadi isi kandungan website

Apa yang aku kongsikan ni cuma la asas untuk buat website yang hanya menggunakan html sebagai permulaan. Unutk website lebih interaktif perlu menggunakan css. Aku rasa kali ni cukup sampai di sini. Post lain kali mungkin aku akan sampaikan dengan lebih terperinci lagi. Tutorial ni sesuai untuk orang yang tak tahu asas programming dan nak cuba2 buat webiste. Internet pun tak diperlukan untuk buat website yang simple ni. Selamat mencuba. Tutorial seterusnya.


Baca lagi:



Cara-cara membuat computer to computer (ad-hoc) connection pada windows 8/8.1.

Semestinya ramai yang dah tahu yang windows 8 kerap kali dikritik oleh orang ramai kerana tidak mesra pengguna (user friendly). Microsoft dah improve sedikit sebanyak melalui windows 8.1 tetapi still salah satu feature yang aku masih tak faham kenapa Microsoft buang pada windows 8/8.1. Nak tau apa? Set up computer to computer (ad hoc) connection. Feature ni sangat digemari oleh gamers sebab korang boleh connect laptop korang dengan laptop yang lain dan boleh main game bersama rakan2 tanpa perlu ada sambungan internet.

Windows 8.1 start screen

Related Posts Plugin for WordPress, Blogger...