Showing posts with label IT. Show all posts
Showing posts with label IT. Show all posts

Mengenal HTML

   



     HTML atau Hypertext Markup Language merupakan bahasa markah setandar untuk dokumen yang dirancang untuk ditampilkan dibrowser. HTML juga merupakan gabungan dari dua istilah yaitu hypertext yaitu dokumen yang berisi tautan yang memungkinkan pengguna terhubung ke halaman lain, dan istilah Markup Language merupakan bahasa komputer yang terdiri dari sekumpulan kode yang digunakan untuk mengatur stuktur dan menyajikan informasi.

Jadi bisa disimpulkan bahwa html adalah bahasa markup yang digunakan untuk membuat struktur (pondasi dasar) atau kerangka sebuah halaman website. Bahasa markah yang digunakan browser untuk menafsirkan dan menulis teks, gambar dan bahan lainnya kedalam halaman web secara visual maupun suara.

Sejarah HTML

- HTML v.1

Sejarah HTML dimulai dari HTML v.1 yang dibuat oleh Tim Berners Lee. HTML v.1 merupakan pioner perkembangan HTML dan masih terdapat banyak kekurangan serta tampilannya yang masih sangat sederhana. HTML v.1 dibuat pada tahun 1991 dan tujuan pembuatannya adalah untuk memudahkan ilmuan untuk mengakses dokumen satu sama lain di berbagai komputer. Kemampuan yang dimiliki antara lain, heading, paragraf, hypertext, list serta cetak tebal dan miring pada teks dan juga versi 1 sudah mendukung peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wrapping).

- HTML v.2

Versi HTML ini merupakan pioner dari adanya web interaktif, penambahan kualitas HTML terletak pada kemampuan untuk menampilkan suatu form pada dokumen. Dengan form kita bisa memasukan informasi nama, alamat, serta saran dan kritik. HTML v.2 dibuat pada tahun 1995 dengan tujuan pembuatan adalah menghubungkan dokumen dan menyajikan informasi dengan berbagai format dan gaya.

- HTML v.3

Fasilitas baru yang ada di HTML v.3 diantaranya ada FIGURE yang merupakan perkembangan dari image untuk meletakan gambar dan tabel, dan mendukung adanya rumus matematika dalam dokumen. Didalam versi ini juga bisa meletakan teks disekeliling gambar, dan bisa menggunakan script di luar HTML untuk mendukung kinerja HTML seperti javascript, VBScript dan lain-lain. Pembuatan HTML 3 dibuat pada tahun 1997 dengan tujuan pembuatannya adalah memperbaiki bug pada versi sebelumnya, dan mendukung styling dengan penggunaan CSS.

- HTML v.4

HTML ini banyak perubahan dari versi sebelumnya dan hampir terjadi perubahan di segala perintah HTML. HTML 4 dibuat tahun 1997-2000 dengan tujuan pembuatan adalah standarisasi kode HTML secara universal sehingga browser apapun dapat menampikan hasil yang sama.

- HTML v.5

HTML v.5 dikenal juga dengan nama HTML 5, dan yang mendasari tampilan website dengan penggabungan antara CSS, HTML dengan JavaScript. HTMl v.5 dibuat pada tahun 2014 dengan tujuan pembuatannya adalah penyaderhanaan syntax dengan efek erroe yang lebih minimal. Fitur-fitur juga lebih disempurnakan. 


Contoh Dokumen HTML sederhana

<!doctype html>
<html lang="en">
<head>
  <title>ilmuendah, Mengenal HTML</title>
</head>
<body>
  <p>Hello, Pembaca Yang Budiman</p>
</body>
</html>




Share:

Konfigurasi Intellij IDEA 2020



Setelalah proses installasi selesai selanjutnya adalah membuka aplikasi program kemudian konfigurasi Intellij IDEA 2020. Tampilan awalnya seperti ini.


Sebelum memulai untuk coding pastikan dulu konfigurasi JDK nya, berikut langkah-langkah konfigurasinya :
1. Pilih Project Structure (ctrl+alt+sift+s)

2. Cek JDK

Jika tampilannya sudah seperti gambar diatas berasi JDK sudah terkonfigurasi secara otomatis karena pada dasarnya komputer yang sudah terdapat installan JDK akan langsung terdeteksi. Namun bagaimana jika belum ada JDKnya sama sekali atau tampilan layar pada sub menu SDKs nya yang untuk konfigurasi JDK kosong? Jangan panik bisa download dulu JDK nya disini, kemudian install. Lalu untuk menambahkan manual dalam Intellij IDEA caranya adalah dengan mengklik tanda + pada halaman JDK. Seperti gambar dibawah ini :


Klik tanda + (alt+insert), pilih foldernya kemudian klik aplay dan ok. Konfigurasi Intellij IDEA selesai.

Kesimpulan :
1. Konfigurasi JDK terdeteksi secara otomatis apabila dikomputer atau laptop sudah pernah menginstall JDK.
2. Penamban JDK dapat juga dilakukan secara manual.

Terimakasih, semoga bermanfaat.


Share:

Langkah Installasi Intellij IDEA 2020



Intellij IDEA 2020 adalah integrated development environment yang dikembangkan oleh Jetbrain dan digunakan untuk mengembangkan software komputer. Intellij IDEA tersedia dalam dua lisensi yaitu lisensi untuk komunitas dan ultimate (komersil). Bagusnya dari kedua lilensi tersebut sama-sama dapat digunakan untuk pengembangan komersil.
Intellij IDEA dapat didownload pada situs resminya di sini. Pilih sesuai dengan system operasi laptop/pc (windows/mac os/linux) kemudian pilih yang lisensi komunitas yang bisa didownload dalam dua bentuk  ekstensni file .exe dan .zip(custom), klik download.



Setelah proses pengunduhan selesai maka langkah selanjutnya adalah installasi intellij IDEA 2020, namun sebelum installasi pastikan terlebih dahulu mempunyai minimum ram 2gb (rekomendasi 8gb), space harddisk minimum 2,5gb, versi JDK mendukung untuk Java 14, versi JRE 11 di bundel, dan resolusi untuk layar minimum 1024x768 (rekomendasi 1920x1080). Buka hasil file yang didownload, jika mendodwnload dengan ekstensi file .exe maka tinggal klik 2 kali, jika mendownload dengan ekstensi file .zip maka harus diunzip terlebih dahulu baru kemudian hasil unzipnya akan berbentuk file ekstensi .exe lalu klik dua kali untuk installasi. Berikut lagkah-langkah menginstall Intellij /idea 2020 :

1. Klik dua kali pada file installasi (saya mendownload dengan ekstensi file .exe).





Klik YES


2. Pilih lokasi tempat installasi nya, dilayar akan ada tampilan berapa besar space yang dibutuhkan dan space yang tersedia, klik next.


3. Setelah klik next maka akan ada pilihan konfigurasi apa yang akan ditambahkan, piliih sesuai dengan kebutuhan masing-masing (custom).

Klik next.

4. Klik Install



Tunggu sampai selesai prosenya.

5. Klik Finisih


Selesai langkah installasi Intellllij IDEA 2020.


Kesimpulan :
1. Intellij IDEA terdiri dari dua lisensi yaitu ultimate (komersil) dan komunitas.
2. Intellij IDEA bisa digunakan untuk pemrograman Java, Groovy, Kotlin dan Kotlin script terlihat dari langkah instalasi no 3 dimana pada pilihan instalasi terdapat .java, .groovy, .kt, .kts.
3. Langkah penginstallanya cukup mudah, hanya tinggal mengikuti langakah-langakah yang sudah tersedia.

Terimakasih semoga dapat bermanfaat.

Langakah selanjutnya untuk menambahkan jdk ada disini.


Share:

MENAMBAHKAN PLUGIN PADA VISUAL STUDIO CODE

Untuk memudahkan kita pada saat melakukan coding di Visual Studio Code maka kita harus memasang sebuah fitur plugin yaitu extension. Dengan adanya extension maka akan mempermudah kita dalam melihat hasil web sederhana yang telah kita coding. Kita hanya perlu menambahkan extension yang kita butuhkan pada Visual Studio Code yaitu dengan cara masuk ke dalam menu extension kemudian ketikan extension yang kita butuhkan untuk menampilkan hasil codingan kita tanpa harus pidah dari layar Visual Studio Code. Contohnya seperti ini pada saat saya akan membuat sebuat tampilan dasar sebuah web yang sangat sederhana yaitu "hello, word!" dengan menggunakan text editor di Visual Studio Code setelah saya selesai membuat codingannya dan disimpan maka saya akan langsung membuka file penyimpanan tadi kemudian membukanya kedalam web browser untuk melihat hasilnya atau melihat tampilan hello word yang telah dibuat tadi. 
Gambar diatas adalah contoh dari codingan untuk membuat tampilan sederhana "hello, word!" dengan nama file index.html untuk menyimpannya tekn ctrl+s.
Cara melihat tampilan hasilnya bagaimana? kita harus mencari diman file tersebut disimpan baru kemudian kita open di web browser.

Hasil tampilannya adalah sebagai berikut.
Gambar diatas adalah hasil dari codingan pada Visual Studio Code dengan nama file index.html.
Ada langkah untuk lebih menghemat waktu kita dalam melihat hasil coding yang kita inginkan di web browser langsung dari dalam Visual Studio Code nya yaitu dengan fitur plugin dan menambahkan extension "Open In Browser". 


Klik extension Open in Browser kemudian install, tunggu sampai proses selesai. Setelah proses instalasi selesai tandanya adalah ceklis installed.
Gambar diatas adalah tampilan setelah selesai proses install extension Open in Browser
Setelah selesai menambahkan extension Open in Browser bagaimana cara kita untuk membuka file index.html? Mudah sekali pada tampilan Visual Studio Code pada tampilan sebelah kirinya ada kumpulan file-file yang telah kita buat langkahnya adalah dengan klik kanan pada file indedx.html kemudian pilih "Open in Default Browser" (alt+B) atau "Open in Other Browser" (sift+alt+B). Karena saya menggunakan default browsernya adalah google chrome maka hasil coding jika kita tekan alt+B maka akan otomatis tampil di web browser google chrome.Langkahnya seperti gambar dibawah ini.
Gambar diatas adalah hasil setelah extension "Open in Browser" telah ditambahkan pada Visual Studio Code. 

Perbedaanya jika sebelum ditambahkan extension "Open in Browser" adalah seperti gambar dibawah ini.
Pada menu klik kanan di file index.html pada saat sebelum ditambahkan extension "Open in Browser" tidak ada pilihan "Open in Default Browser" (alt+B) atau "Open in Other Browser" (sift+alt+B). Sedangkan jika sudah ditambahkan atau sudah terinstall extension "Open in Browser" maka akan ada pilihan "Open in Default Browser" (alt+B) atau "Open in Other Browser" (sift+alt+B) setelah klik kanan pada file index.html didalam Visual Studio Code.
Selesai langkah untuk menambahkan extension agar hasil codingan kita dapat dilihat langsung melalui text editor Visual Studio Code. Untuk menambahkan extension-extension yang lain yang berguna untuk mempermudah langkah kita dalam mengkoding atau membuat sebuah web dengan menggunakan text editor Visual Studio Code langkahnya sama yaitu dengan masuk ke menu extension yang da di Visual Studio Code kemudian search extension yang kita perlukan lalu install.
Sekian semoga bermanfaat dan menambah wawasan. Terimakasih.

Share:

MARIADB SERVER


Setelah MySQL diakuisisi oleh Oracle pada bulan Oktober 2010 pengembang asli dari MySQL yaitu Monty Program (penulis awal kode sumber MySQL) mulai mengembangkan MariaDB Server, karena setelah diakuisisi MySQL menjadi berlisensi proprietary, yang artinya akan menjadi sebuah server database yang pengembangannya terbatas dan berbayar. Maka dari itu pengembang asli MySQL mulai memisahkan diri dan mengembangkan MariaDB Server yang didistribusikan secara gratis dibawah lisensi GPL (General Public Licenci). Setiap pengguna bebas menggunakan MariaDB namun ada batasannya yaitu tidak boleh dijadikan produk turunan yang bersifat komersil. MariaDB dapat didownload disini. Versi Xampp yang terbaru ternyata sudah mengganti MySQL dengan MariaDB. Versi terbaru dari MariaDB juga mencakup fitur GIS dan JSON.
Cara mengakses MariaDB adalah dengan mengaktifkan membuka aplikasi Xampp dan mengaktifkan Apache dan Mysql.

Setelah status Apache dan MySQL running maka kita akan mengakses sistem manajemen database MariaDB yang tersusun secara relasional dengan cara double klik shell pada tab sebelah kanan Xampp. Seperti ini tampilannya.

Setelah tanda # lalu tuliskan perintah : #mysql -u root (masuk kedalam sistem database untuk membuat, mengedit database).
1. Cara melihat database yang ada pada MariaDB. 

show databases;
maka akan tampil semua database yang ada seperi gambar diatas. Kemudian untuk membuat database baru perintahnya adalah 'create database buku;'. Kemudian untuk mengecek apakah database yang kita buat tadi berhasi adalah dengan menggunakan perintah show databases;. Pada gambar diatas juga terlihat bahwa database buku telah berhasil dibuat. Jika kita ingin menggunakan database buku maka perintah yang kita gunakan adalah 'use buku;'.
2. Memebuat tabel didalam database.
Pada gamabr diatas MariaDB [buku] berarti menandakan bahwa kita telah berada didalam database buku, kemudian kita tambahkan tabel pegawai kedalamnya dengan perintah :
create table pegawai(
-> nip varchar (18) not null,
-> nama varchar (30) not null,
-> tgllahir date not null,
-> alamat text not null,
-> namafoto varchar (50) not null,
-> primary key (nip)); 
(enter)
Query OK, berarti menandakan bahwa kita telah sukses membuat tabel pegawai.

3. Melihat tabel dan struktur tabel
Untuk melihat tabel yang telah kita buat tadi didalam database buku adalah dengan perintah show tables;

Dari gambar diatas terlihat bahwa tabel pegawai telah dibuat dan didalam database buku hanya ada tabel pegawai.
Untuk melihat struktur tabel ketikkan perintah desc pegawai;
4. Mengisi data dalam tabel
insert into pegawai values ('3131, 'nanda', '01-01-1998', 'banyumas', 'nanda');
'3131' adalah input nip
'nanda' adalah input untuk nama
'01-01-1998' adlah input untuk tanggal lahir
'banyumas' adalah input untuk alamat
'nanda' adalah input untuk nama foto.
'3232' adalah input nip
'amanda' adalah input untuk nama
'02-02-1998' adlah input untuk tanggal lahir
'purbalingga' adalah input untuk alamat
'amanda' adalah input untuk nama foto.
Setelah selesai menginput dua data tersebut kedalam tabel maka kita akan menunjukkan hasil inpput data tadi dengan perintah select* from pegawai;
 
Maka akan muncul tampilan seperti gambar diatas dengan nip, nama, tgllahir, alamat, dan nama foto sesuai dengan data yang telah kita inputkan tadi.

Jika diperhatikan dari awal tanggal lahir yang kita input pada tabel pegawai masih saja kosong padahal input data nip, nama, alamat, dan namafoto telah terinput dengan baik, mengapa???
kareana format yang dimasukan tidak sesuai, di tanggal lahir harusnya format nya bukan dari tanggal-bulan-tahun yang benar formatnya adalah tahun-bulan-tanggal??bagaimana cara merubah isi tabel hanya pada input tanggallahir, tanpa mengulangi input dari awal atau menghapus tabel secara keseluruhan. Seperti ini konsepny select* from nama_table where kondisi.
Disini saya akan mengedit tanggal lahir untuk nip 3131 dengan nama nanda dari tabel pegawai maka perintahnya adalah select* from pegawai where nip=3131;
Akan muncul tampilan seperti dibawah ini.
Langkah selanjutnya adalah kita memilih mana yang akan kita update, karena yang akan kita update adalah tgllahir, maka perintahnya adalah update pegawai set tggllahir='1998-01-01' where nip='3131';
Query OK tandanya update telah sukses, kemudian cek dengan perintah select* from pegawai where nip=3131;
Hasilnya seperti gambar dibawah ini.
 Langkah yang sama digunakan juga untuk mengupdate tabel dengan nama amanda.
Sukses untuk membuat database, membuat tabel dalam database, input dan update tabel. Secara keseluruhan perintah dasar pada MariaDB sama dengan MySQL.
Sekian postingan kali ini semoga dapat menambah wawasan dan ilmu pengetahuan. Terimaksih.





Referensi :
- https://id.wikipedia.org/wiki/MariaDB
- https://www.codepolitan.com/mengenal-mariadb
- https://mariadb.org/about/
Share:

MENGAKTIFKAN MODE DEBUG PADA FLASK

Pada postingan sebelumnya kita telah membahas bagaimana cara install framework flask python di virtual studio code. Kali ini kita akan belajar untuk mnegaktifkan mode bug pada flask, agar pada saat kita membuka localhost:5000 pada webbrowser kita dapat melakukan refresh dan akan muncul tampilan sesuai yang kita inginkan tanpa harus mematikan flasknya terlebih dahulu atau ctrl+c pada visual studio code (update otomatis).
Pertama yang harus kita lakukan adalah masuk dan aktifkan virtual environtment webku kemudian buat file baru dengan nama app.py (.py adalah ekstensi untuk python).
Oke dari gambar diatas kita sudah membuat file app.py baru didalam folder webku. Tinggal mengaktifkan VE pada webku. Dengan mengetikkan perintah "scripts\activate", Maka VE webku akan aktif.
Kembali lagi ke file app.py kemudian ketikan code seperti gambar dibawah ini.
from flask import Flask

app=Flask(__name__)
@app.route("/")
def index():
return "python and framework flask is the simple and easy coding"

if __name__=="__main__"
from app import app
app.run()

Setelah selesai mengetikan code diatas kemudian simpan. Lalu pada terminal krtikan perintah "python app.py"

Berhasil flask yang telah diinstall berhasil menjalankan app.py, kemudian buka web browser lalu masukan alamat ini http://127.0.0.1:5000/ atau localhost:5000 pada URL webbrowser. Kenapa harus localhost:5000 (atau localhost dengan port 5000) ?? karena dari default nya adalah port 5000. Hasilnya adalah.
Oke kita telah berhasil membuat lokalhostnya menampilkan apa yang telah kita input pada file app.py. Bagaimana jika kita ingin mengganti tampilanya? kita harus menonaktifkan dahulu "python app.py" yang sedang running diterminal dengan cara ctrl+c lalu masuk lagi kedalam file app.py dan mengubahnya kemudian save lagi baru jalankan lagi "python app.py". Contohnya kita akan mengubah tulisannya berbeda dengan tampilan sebelummnya menjadi "Hello python !".
Codenya kita ubahdibagian return yang tadinya berisi "python and framework flask is the simple and easy coding" menjadi "Hello python!".
return "Hello python!"
Kemudian save lalu jalankan lagi app.py pada terminal kemudian masuk keweb browser dan refresh maka tampilannya akan berubah.

Langkah ini kurang simpel karena harus menonaktifkan dan mengaktifkan lagi app.py setiap kita akan mengeditnya lalu baru bisa refresh tampilan pada webbrowser. Untuk menangani ini kita bisa membuatnya lebih simpel yaitu bagaimana kita mengedit file app.py dan kemudian refresh tampilan webbrowser maka tampilan web browser akan update otomatis mengikuti inputan terbaru yang kita input pada file app.py tanpa haru menonaktifkan dan mengaktifkan aap.py di terminal. Caranya adalah dengan mengaktifkan mode debug.
Dari gambar diatas terlihat bahwa pada saat menjalankan file app.py status debig mode nya adalah off. Kita akan mengaktifkannya dengan cara :
1. Pada app.py kita edit code bagian app.run() 
Menjadi app.run(debug=True) lalu save
2. Jalankan app.py dengan cara ketikan perintah Python app.py diterminal
Dari gambar diatas terlihat bahwa mode debugnya sudah on. Kita bisa merubah tampilan teks nya tanpa harus menonaktifkan dan mengaktifkan ulang file app.py nya. Tinggal edit file app.py kemudian save lalu refresh web browser maka akan otomatis yang tampil adalah inputan terbaru kita.

Sukses, Kita bisa mengaktifkan mode debug dan memudahkan kita dalam mengedit tampilan localhost secara otomatis.
Sekian postingan kali ini semoga bermanfaat dan menambah wawasan. Terimaksih

Share:
Batman Begins Background

Postingan Populer

ABOUT ME

ENDAH SARAH WANTY
Hanya seorang alumni Sarjana Teknik Informatika. Sekarang sedang fokus menikmati hidup sambil mengisi waktu untuk ngeblog dan berharap ilmunya dapat bermanfaat untuk banyak orang. 

Recent Posts