Materi Pemrogramman Web Dasar

 

Artikel ini dibuat untuk melengkapi pembuatan materi pemrograman web dasar. Materi versi google slide bisa dilihat melalui link https://rtikmagetan.or.id/mp1. Semoga dengan adanya artikel ini dapat membantu penulis serta peserta dalam melakukan praktek pembelajaran web programming.

Pendahuluan

Sebelum masuk ke persiapan teknis, hal pertama yang perlu disiapkan adalah mental yang kuat. Dalam dunia pemrograman kamu tidak akan pernah selesai belajar karena luas dan cepatnya perkembangan di bidang keilmuan ini.

Di lain sisi, sebagai seorang programmer kita juga akan bertanggung jawab dengan data-data penting yang diamanahkan untuk diolah.

Kemampuan programming ini bisa saja disalah gunakan untuk kegiatan negatif seperti hacking atau peretasan data. Termasuk untuk mendukung kegiatan-kegiatan ilegal lainnya.

Pastikan kamu punya laptop sendiri untuk fasilitas belajar. Karena sebagai pelajar kamu perlu mendatangi guru atau tempat pelatihan, sehingga diperlukan hardware yang mudah dibawa kemana-mana.

Semoga kita bisa istiqomah meluruskan niat belajar kita. Bagi yang belum siap untuk berlelah-lelah dalam belajar, disarankan untuk tidak perlu melanjutkan materi ini.

Terimakasih dan selamat belajar.

Persiapan

1. Blog atau catatan materi pemrograman yang bisa diakses kapan saja dan dimana saja. Karena tidak memungkinkan untuk mengingat semua ilmu IT yang begitu luas. Sangat disarankan menggunakan blogspot, wordpress dan semacamnya.
   
   
   
   
   
2. Instalasi web server untuk mengetahui cara kerja website. Untuk sistem operasi windows bisa menggunakan XAMPP dan bagi pengguna linux bisa langsung menjalankan perintah sudo apt install apache2
   
   
   
   
   
3. Instalasi text editor untuk pembuatan, penulisan dan pengeditan kode program. Text editor yang biasa digunakan seperti Sublime Text, Visual Studio Code, Nano dll.
   
   
   
   
   
4. Instalasi GIT untuk version control sekaligus memberikan catatan dan history perubahan kode yang sudah kita buat. Untuk pengguna windows bisa menginstall GIT for windows dan pengguna linux tinggal jalankan perintah sudo apt install git
   
   
   

Praktek

1. Buat catatan atau artikel. Sebagai contoh dalam praktek saya menggunakan fasilitas blogger. Pastikan kamu sudah membuat akun gmail dan mendaftar blog di www.blogger.com. Buat artikel baru yang berisi tentang pembelajaran saat ini.
   
   
2. Buat Folder belajar di Root Web Server. Path folder atau lokasi folder berada di C:\xampp\htdocs\belajar\ , jika kita menggunakan XAMPP di sistem operasi windows. Untuk pengguna linux, secara default lokasi root web server ada di /var/ww/html/belajar
   
   
3. Buka Text Editor dan Tambahkan Folder belajar Pada Sidebar. Sebagai contoh penulis menggunakan Sublime Text editor. Klik menu Project - Add Folder to Project untuk menambahkan folder kerja pada sidebar. Klik kanan pada folder belajar dan pilih New File untuk membuat file baru pada folder kerja tersebut.
   
   
   
   
   Setelah klik menu New File akan muncul popup folder belajar. Masukan nama file index.php pada kotak input File Name dan klik tombol Save untuk menyimpan file yang sudah kita buat.
   
   
   
   
   
   
   Ketikan kalimat Hello World! dan simpan kode tersebut dengan tekan tombol Ctrl + S untuk menyimpan kode atau pilih menu File - Save.
   
   
   
   
   
   
4. Akses File Melalui Browser. Pastikan service web server apache2 sudah berjalan dan buka web browser. Sebagai contoh penulis menggunakan Google Chrome web browser dan ketikan url http://localhost/belajar/index.php atau cukup http://localhost/belajar/. Akan tampil tulisan seperti gambar di bawah ini. Selamat, kamu sudah membuat kode PHP pertamamu!
   
   
   
   
   
   
5. Membuat Repository GITHUB. github.com adalah salah satu server penyedia layanan git yang paling populer saat ini. Buatlah akun github-mu dan kita akan membuat repository serta melakukan upload kode program ke repository tersebut.
   
   
   

   
   
6. Setting GIT di Server Lokal. Buka windows file explorer dan masuk ke C:\xampp\htdocs\belajar . Klik kanan di area folder dan pilih menu Git Bash Here. Akan muncul popup window baru aplikasi git. Pastikan folder kerja sudah sesuai berada di dalam folder belajar. Kita bisa menggunakan perintah cd /path/ke/folder/tertentu/ untuk melakukan pemindahan folder kerja melalui terminal git.
   
   
   
   
   

   Ketikan perintah git init untuk melakukan setting awal git pada folder kerja. Selanjutnya tambahkan settingan url repository yang akan di remote dengan perintah git remote add origin https://github.com/username/nama_repo_git.git. URL repository bisa didapatkan di halaman repository akun github kita.
   
   Ketikan perintah git add . untuk menambahkan semua file di dalam folder belajar ke dalam folder .git . Kemudian jalankan perintah git commit -am "pesan catatan" untuk memberikan catatan history pada kode yang sudah kita buat. Untuk melakukan upload kode ke repository github, jalankan perintah git push origin master. Jika berhasil akan muncul pesan sukses seperti pada gambar di bawah.
   
   
   
   
   

   Untuk memastikan kode kita sudah berhasil terupload, bukalah repository kita di github. Akan ada satu file index.php dengan pesan commit sesuai yang sudah kita tuliskan sebelumnya. Siapa user yang melakukan push atau upload dan waktu push-nya juga tercatat. Repository kita di github.com juga berfungsi sebagai backup kode, jika suatu saat kode program kita di lokal hilang.
   
   

Penutup

Materi terkait repositori GITHUB menandakan bahwa kelas dasar ini telah selesai. Di sini tadi kita sudah belajar tentang membuat artikel atau catatan pembelajaran. Instalasi web server, text editor dan aplikasi GIT.

Materi selanjutnya adalah sebagai berikut:

1. CRUD database MYSQL / MariaDB
2. Membuat Plugin Wordpress
3. Membuat Chrome Extension
4. Menggunakan GIT untuk Kolaborasi

Pada setiap kelasnya, diharapkan agar peserta bisa mencatat materi sesuai apa yang dipahami dalam bentuk artikel di blog-nya. Catatan ini nantinya bisa digunakan pada waktunya.