Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Pengenalan Angular: Dasar-dasar Framework untuk Pembuatan SPA

4:14 AM Add Comment


Logo Angular

Angular adalah salah satu framework populer untuk pembuatan aplikasi web modern. Ini memungkinkan Anda membuat aplikasi yang responsif, interaktif, dan mudah digunakan dengan cara yang efisien dan terstruktur. Dalam artikel ini, kita akan membahas dasar-dasar Angular dan bagaimana Anda dapat memulai menggunakannya.


Angular adalah framework JavaScript open-source yang dikembangkan oleh Google. Ini dapat digunakan untuk membuat aplikasi berbasis Single Page Application (SPA), yang memungkinkan Anda membuat aplikasi web yang responsif dan memuat halaman secara real-time tanpa memuat ulang halaman seluruhnya.

Baca juga Pengertian React JS

Angular menggunakan konsep pemrograman berorientasi komponen, yang memungkinkan Anda membagi aplikasi Anda menjadi komponen yang terpisah dan dapat dipakai kembali. Setiap komponen memiliki logic, template, dan styling yang terpisah, sehingga memudahkan Anda dalam memelihara dan mengembangkan aplikasi Anda.


Untuk memulai menggunakan Angular, Anda perlu memasang Angular CLI, yang merupakan alat untuk membuat dan mengelola proyek Angular. Setelah itu, Anda dapat membuat proyek baru menggunakan perintah "ng new [nama proyek]".


Angular menggunakan bahasa pemrograman TypeScript, yang merupakan bahasa pemrograman yang didesain khusus untuk pengembangan aplikasi web. TypeScript memiliki tipe data yang jelas dan memiliki fitur seperti class dan interface, yang membuat kode Anda lebih terstruktur dan mudah dibaca.


Setelah membuat proyek baru, Anda dapat memulai membuat komponen baru dengan menggunakan perintah "ng generate component [nama komponen]". Setiap komponen terdiri dari tiga bagian: template HTML, class TypeScript, dan styling CSS. Anda dapat mengatur interaksi antar komponen dengan menggunakan properti input dan output.

Baca juga Apa itu jQuery

Angular juga memiliki fitur bawaan seperti direktif, yang memungkinkan Anda memodifikasi componen tanpa harus menulis logika baru. Contohnya, direktif ngFor memungkinkan Anda menampilkan daftar item secara dinamis dalam template.


Untuk membuat aplikasi yang memiliki routing, Anda dapat menggunakan module Router. Router memungkinkan Anda menentukan bagaimana aplikasi Anda harus bereaksi terhadap perubahan URL, sehingga menjadikan aplikasi Anda seperti aplikasi multi-halaman. Anda dapat menentukan rute dan memetakan URL ke komponen tertentu, sehingga memudahkan pengguna untuk menavigasi aplikasi Anda.


Angular juga memiliki fitur bawaan untuk mengelola data, seperti HTTP client untuk mengirim dan menerima data dari server, dan observables untuk memantau perubahan data dalam aplikasi. Anda juga dapat menggunakan service untuk mengelola data dan logika bisnis Anda, sehingga memudahkan Anda dalam memelihara dan mengembangkan aplikasi Anda.


Angular juga memiliki banyak komponen UI bawaan dan library tambahan seperti Angular Material, yang memudahkan Anda dalam membuat antarmuka pengguna yang responsif dan interaktif. Anda juga dapat menggunakan fitur seperti form validation dan templating untuk membuat antarmuka pengguna yang mudah digunakan.


Kesimpulan

Angular adalah salah satu framework pemrograman web terpopuler yang memungkinkan Anda membuat aplikasi SPA dengan cara yang efisien dan terstruktur. Dengan menggunakan konsep pemrograman berorientasi komponen, TypeScript, dan fitur seperti routing dan data management, Anda dapat membuat aplikasi web yang responsif, interaktif, dan mudah digunakan.


Jika Anda tertarik untuk mempelajari Angular lebih lanjut, Anda dapat memulainya dengan membaca dokumentasi resmi, mengikuti tutorial online, atau mengikuti kelas pemrograman. Dengan mempelajari Angular, Anda dapat membuat aplikasi web modern dan memperluas skill pemrograman Anda.

Membuat layout menggunakan librari semantic-ui-react pada aplikasi react js

1:08 AM Add Comment
Kita akan membuat layout website responsive menggunakan librari semantic-ui-react. Semantic UI adalah semacam UI frameworks yang memudahkan kita membuat website template atau style website, karena source css, javascript, dan html telah siap untuk digunakan atau diimplementasikan ke dalam project website. Dengan ui framework, kita tidak perlu lagi membuat style website dan fungsi-fungsi javascript dari awal, sangat membantu mempercepat pengembangan aplikasi yang kita buat. Librari semantic-ui-react adalah komponen-komponen react js yang dibuat menggunakan style semantic ui (semantic-ui.com). Semua dokumentasi dari setiap komponen react js bisa kita pelajari melalui website https://react.semantic-ui.com. Pada tutorial sebelumnya kita telah membuat halaman-halaman website menggunakan librari react-router-dom. Tutorial kali ini kita akan membuat layout website responsive yang sudah ada navigasi atau menu untuk menuju ke setiap halaman website. Contoh layout yang akan kita buat seperti ini https://react.semantic-ui.com/layouts/homepage Ikuti langkah-langkah berikut ini: 1. Masuk ke project react js yang telah kita buat, dan install librari semantic-ui-react.
$ cd aplikasi-reactjs
$ npm install --save semantic-ui-react
2. Install package css dari semantic ui.
$ npm install --save semantic-ui-css
3. Import semantic-ui-css di dalam file index.js: 4. Buat folder containers dan components di dalam src:
$ mkdir src/containers
$ mkdir src/components
5. Buatlah file-file berikut ini pada folder nya masing-masing: src/components/HomepageHeading.js ---- src/containers/DesktopContainer.js ---- src/containers/MobileContainer.js ---- src/containers/FooterContainer.js ---- src/containers/ResponsiveContainer.js ---- src/Router.js ---- src/pages/HomePage.js ---- src/pages/AboutPage.js ---- src/pages/ContactPage.js ---- 6. Jalankan aplikasi react js anda di localhost: $ npm start Baiklah sampai disini project react js kita sudah memiliki layout yang responsive terdiri dari navigasi, header, footer dan content setiap page. Berikut ini adalah file-file yang baru dibuat dan yang di-edit: File Baru: src/components/HomepageHeading.js src/containers/DesktopContainer.js src/containers/FooterContainer.js src/containers/MobileContainer.js src/containers/ResponsiveContainer.js
File Edit:
src/index.js src/Router.js src/pages/AboutPage.js src/pages/ContactPage.js src/pages/HomePage.js Langkah selanjutnya adalah upload hasil kerja anda ke server hosting. Ikut langkah-langkah pada tutorial bagian 2. Anda bisa melihat hasil dari tutorial ini di alamat website www.opetstudio.com. Source code tutorial di https://github.com/opetstudio/tutorial-reactjs/tree/tutorial-bagian-3. Okey, sekian tutorial cara membuat layout website react js menggunakan librari semantic-ui-react, jika ada bagian yang kurang anda mengerti, anda bisa bertanya langsung di kolom komentar. Ikuti terus seri tutorial react js dalam bahasa Indonesia untuk seri yang akan datang. Terima kasih telah membaca tutorial yang sederhana ini. Semoga bermanfaat. Salam..!!!

Implementasi react-router-dom untuk membuat pages website pada aplikasi react js

12:55 AM Add Comment
Implementasi react-router-dom untuk membuat pages website pada aplikasi react js

Tutorial ini akan membahas tentang penggunaan router pada aplikasi react js. Kita akan menggunakan librari atau package react-router-dom sebagai router. Kegunaan router adalah memisahkan komponen-komponen mana yang akan di-render berdasarkan path url yang sudah ditentukan. Contohnya path url "/home" untuk komponen "HomePage.js", path "/about" untuk "AboutPage.js", path "/contact" untuk "ContactPage.js", dan seterusnya. Ada dua tipe komponen router yang dapat kita pakai dari librari react-router-dom. Pilih salah satu komponen yaitu HashRouter atau BrowserRouter. 

Jika aplikasi react js akan diakses melalui browser, maka disarankan menggunakan BrowserRouter. Berikut ini contoh perbedaan url yang menggunakan HashRouter dan BrowserRouter: HashRouter: http://www.opetstudio.com/#/home BrowserRouter: http://www.opetstudio.com/home Terlihat perbedaannya, yang satu memakai hash, yang satunya lagi tidak memakai hash. Biasanya saya menggunakan HashRouter saat membuat aplikasi dashboard kusus untuk admin. 


Pada prakteknya nanti, anda bisa coba-coba kedua tipe router di atas. Okey, kita langsung saja implementasi librari react-router-dom pada project yang sudah kita buat pada tutorial bagian 1, dan langsung kita upload ke hosting sama seperti tutorial bagian 2. Kita akan membuat tiga halaman website yaitu halman home, about dan contact. Ikuti langkah-langkah berikut: 1. Pertama, masuk ke dalam folder project react js dan install librari atau package react-router-dom:
$ cd aplikasi-reactjs
$ npm install --save react-router-dom
option --save artinya save daftar module atau package yang telah kita install ke dalam file package.json. 2. Buatlah folder "pages" di dalam folder src:
$ mkdir src/pages
3. Buatlah file HomePage.js di dalam folder "pages" tadi, dan copy paste script di bawah ini: Save file anda tadi dengan command: ":wq!", atau save file seperti biasa jika menggunakan editor. Saya sarankan gunakan editor Visual Studio Code, biar lebih mudah. 4. Ikut step ke-2 untuk membuat file AboutPage.js dan ContactPage.js, sesuaikan nama class nya dengan nama file nya. Ganti tulisan "ini adalah halaman Home" sesuai dengan halaman masing-masing biar kelihatan perpindahan antara page. Jadi file page yang telah kita buat dan berada di dalam folder src/pages/ adalah file: HomePage.js, AboutPage.js dan ContactPage.js. 5. Buatlah satu file dengan nama "Router.js" di dalam folder src. Copy dan paste script javascript berikut: 6. Edit file src/index.js, Replace semua string "App" dengan "Router. Hasil koding nya seperti ini: 7. Implementasi react-router-dom telah selesai. Sekarang ketik command berikut untuk menjalankan aplikasi react js di localhost:
$ npm start
Akses alamat url berikut untuk membuka setiap halaman yang telah kita buat tadi: http://localhost:3000/home http://localhost:3000/about http://localhost:3000/contact Jreng..Jreng..Jreng.. Halaman-halaman website anda sudah bisa di akses menggunakan alamat url nya masing-masing karena kita telah memasang router pada aplikasi atau project react js. Saya rasa tutorial ini terlalu gampang untuk diikuti. Bukan begitu bukan? Selanjutnya, upload hasil kerja kita tadi ke hosting anda masing-masing. Ikuti langkah-langkah berikut: 1. Jalankan perintah berikut untuk build project react js:
$ npm run build
hasil build file-file source berada di dalam folder build, semuanya sudah di minify dan siap untuk diupload ke server. 2. Buka aplikasi ftp seperti WinScp, Filezilla, Transmit atau aplikasi-aplikasi ftp lainnya yang biasa anda gunakan, lalu masuk ke hosting menggunakan username dan password ftp yang telah diberikan oleh jasa penyedia hosting . Upload semua isi folder build ke folder public_html di server hosting anda. 3. Step ini sangat penting..!!!. Jangan lupa buat file .htaccess dan upload ke dalam folder public_html di server. Copy Paste script berikut ke dalam file .htaccess:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Setelah selesai semua proses upload, silahkan akses halaman-halaman website anda menggunakan alamat domain pribadi anda. Contoh alamat domain yang saya gunakan adalah opetstudio.com:


Baiklah sekian tutorial yang sangat singkat ini, jika ada yang kurang anda mengerti, silahkan bertanya di kolom komentar. Ikuti terus seri selanjutnya dari tutorial react js "Tutorial React Js Bahasa Indonesia", sehingga anda bisa mengerti cara membuat aplikasi website menggunakan react js. source code tutorial: https://github.com/opetstudio/tutorial-reactjs Terima kasih sudah membaca tutorial yang sederhana ini.

Type Conversion javascript

12:26 AM Add Comment
Type Conversion javascript

Type Conversion adalah sebuah cara untuk merubah type data pada javascript, misalkan merubah type data string menjadi number atau sering disebut conversion. Conversi ke String
let angka=12;//type data Number
let ubah = String(angka);// "12"
console.log(typeof ubah); // type data menjadi String

let cek = true; //type data boolean
let ubah2= String(cek);//"true"
console.log(ubah2);
atau bisa menggunakan cara yang kedua yaitu menggunakan fungsi toString();
let num=12;//type Number
let ubah =  num.toString();
console.log(typeof ubah);// "String"
Conversi ke Number
let text ="123";//String
let ubah = Number(text);
console.log(typeof ubah);//Number

let cek =true;//boolean
let ubah1 =Number(cek);// 1
console.log(typeof ubah1);//Number
nilai true dan false kalau di konversi dengan Number menjadi 1(true) dan 0(false). cara kedua menggunakan fungsi parseInt dan parseFloat, parseInt digunakan untuk merubah menjadi bilangan bulat sedangkan parseFloat digunakan untuk merubah kebilangan pecahan.

  
let num="12.12";//string
let bulat = parseInt(num); //hasil 12
console.log(typeof bulat);// Number

let pecahan=parseFloat(num);//hasil 12.12
console.log(typeof pecahan);//Number
Conversi ke Boolean
console.log(Boolean(1));//true
console.log(Boolean(0));//false
console.log(Boolean("story"));//true
console.log(Boolean(""));//false
sekian cara konversi type data pada javascript, ada tantangan buat teman-teman silahkan dijawab untuk melatih pemahaman teman-teman.
"" + 2 + 3
"" - 4 + 5
true + true
12 / "3"
"5" * "5"
7 + 8 + "px"
"$" + 1 + 12
"5" - 4
"12px" - 8
12 / 0
"  -12\n" + 5
"  -14\n" - 3
null + 3
undefined + 3

TUTORIAL CARA HOSTING REACT JS

11:39 PM Add Comment
Tutorial kali ini kita akan belajar cara hosting react js atau cara upload ke hosting apache. Biasa nya jasa penyedia hosting yang ada di pasaran, adalah hosting apache yang terdiri dari database mysql, aplikasi php dan web server apache, atau kalau anda sudah mahir biasanya menggunakan vps (virtual private server) atau server dengan teknologi cloud computing.

Biasanya saya menggunakan vultr.com. Jika anda ingin menggunakan vps atau cloud computing, atau server cloud, tapi kurang tahu caranya, anda bisa menghubungi saya. Baiklah mungkin anda memilih menggunakan hosting apache, karena lebih mudah dan lebih praktis karena aplikasi-aplikasi yang dibutuhkan yaitu mysql, php dan apache sudah diinstall dan siap digunakan tanpa harus config sana sini. Silahkan anda pilih jasa-jasa penyedia hosting seperti rumahweb, niaga hoster, dewa web, nusantara host, dan masih banyak lagi situs-situs penyedia hosting lainnya. 

Kunjungi situs penyedia hosting yang anda inginkan, ikuti langkah-langkah untuk berlangganan di sana, pilihlah nama domain yang ter-keren, dan jangan lupa untuk membayar hosting tersebut, biar nantinya diaktifkan oleh admin nya, sehingga nama domain ter-keren yang anda pilih tadi bisa diakses dari browser anda, contohnya www.namadomainterkeren.com. Okeh, kembali ke project anda. Ikuti langkah-langkah berikut untuk membuat project anda bisa dibuka melalui nama domain yang sudah anda pilih.

Langkah langkah cara hosting React JS

1. Lihat script atau command apa saja yang tersedia di dalam project anda.
$ cd aplikasi-reactjs
$ cat package.json
 

 2. Di bagian field scripts, disitu ada command start, build, test dan eject. Command yang kita akan gunakan adalah command build, yaitu untuk bundling source dari project react js kita, yang telah di minify sehingga menjadi sangat ringan, dan siap untuk diupload ke server hosting.
$ npm run build
Tunggu sampai selesai. Hasil build nya berada di dalam folder build. 3. Upload hasil build tadi ke dalam hosting yang telah kita beli dari situs penyedia hosting tadi. Buka aplikasi ftp anda lalu upload ke dalam publc folder. Biasanya nama foldernya adalah www atau public_html. Upload semua isi dari folder build tadi ke dalam folder public di hosting anda. Jangan lupa hapus file home.htm dari dalam folder public_html jika ada.  


 4. Jika telah selesai anda upload semua source yang ada di dalam folder build tadi, maka aplikasi react js anda sudah bisa di akses dari nama domain yang anda telah daftarkan tadi. Untuk tutorial ini, saya menggunakan nama domain "opetstudio.com". Silahakn akses http://www.opetstudio.com untuk melihat hasilnya. Jika anda telah berhasil, share alamat domain ter-keren anda tadi di kolom komentar. Jika ada yang kurang jelas, silahakan bertanya di kolom komentar, saya akan membantu anda sampai bisa. Ikuti terus seri tutorial "Tutorial React Js Bahasa Indonesia". Tutorial yang berikutnya, kita akan membuat router di dalam project react js kita, sehingga kita bisa membuat halaman-halaman di dalam website kita tadi, seperti halaman home, halaman about, halaman contact dan lain-lain. Sekian tutorial kali ini, source code nya ada di dalam https://github.com/opetstudio/tutorial-reactjs Terima kasih sudah membaca tutorial yang sederhana ini. Semoga bermanfaat.