Project Aplikasi Sederhana Untuk Belajar Python

Project Aplikasi Sederhana Untuk Belajar Python - Beberapa minggu yang lalu saya belajar bahasa pemrograman Python, Python merupakan hal yang baru, menarik dan harus di mulai dari bawah bagi saya. Seperti yang banyak dirasakan para programmer hebat, cara terbaik beradaptasi dengan bahasa pemrograman baru adalah dengan implementasi langsung dalam pengerjaan project. Masalahnya bagaimana jika belum ada project namun rasa ingin belajar pemrograman baru tinggi?

Mulailah dengan project sederhana. Project ini dapat berupa game-game kecil tanpa harus ada UI. Untuk saya, beberapa project seperti game Tebak Kata, Tebak Angka, hingga game Gunting Batu Kertas adalah project-project sederhana namun sangat membantu dalam belajar bahasa Pemograman Python.

Project Aplikasi Sederhana Untuk Belajar Python

Pembuat Cerita

Project ini dapat memberikan pemahaman lebih terhadap konsep string dan variabel dalam Python. Projectnya akan memiliki format sebuah cerita dimana beberapa bagian cerita kosong (untuk diisi). User akan diberikan kesempatan untuk mengisi kata-kata yang diinginkan, ketika selesai, program menampilkan cerita dengan format yang sudah ada digabung dengan input dari user.

Konsep yang digunakan:

String, Variable, Input/Output, List

Gunting Batu Kertas

Permainan yang sangat populer dan sederhana ini dapat menjadi alternatif mini project yang baik untuk belajar Python. Dengan lawan adalah komputer, user akan beradu gunting batu kertas. Komputer memilih secara acak antara gunting, batu dan kertas. Kemudian dilanjutkan dengan input pilihan user. Jika user memilih gunting sedangkan komputer memilih kertas makan user menang, dan begitu pula dengan pilihan-pilihan lain sesuai aturan permainannya.

Konsep yang dibutuhkan:

Random, Function, If-Else Statement, Dictionary, List, Tuple, dan While Loop

Permainan Lembar Dadu

Project ini sangat sederhana, merupakan permainan simulasi lempar dadu. User akan diberikan kesempatan untuk me-roll dadu secara acak, program kemudian menampilkan hasil lemparan acaknya. Sangat sederhana namun baik untuk menjadi dasar memulai project-project berikutnya.

Konsep yang digunakan:

Random, Integer, Print, Input, dan While Loop

Permainan Petualangan dengan Text

Permainan ini memiliki skenario seekor kelinci yang ingin mengantar sebuah telur untuk di simpan pada sebuah keranjang. Keranjang berada pada sebuah ruangan dalam rumah. Dengan menggunakan input text user dapat menggerakkan kelinci dari satu ruangan ke ruangan lain untuk mencari keranjang. Setelah telur berhasil di kirim, kelinci harus di arahkan ke ruangan awal pada saat game baru di mulai.

Konsep yang digunakan:

Random, Function, If-Else Statement, Dictionary, List, Tuple, While Loop, Bolean, dan Input-output

Tebak Kata

Bagi saya ini adalah project sederhana yang paling menarik karna mirip salah satu game yang ada di kamus elektronik Indonesia-Inggris yang sering saya mainkan waktu sekolah SD dan SMP. Bedanya, kita membatasi game ini hanya pada 1 bahasa saja, yaitu Indonesia. 

Tujuan project ini sederhana, user akan menebak kata acak pilihan komputer hingga benar. Awalnya game memiliki beberapa kata, kemudian dipilih secara acak untuk di tebak oleh user. User bisa memasukkan 1 huruf pertebakan kemudian game mengecek apakah ada huruf tersebut yang terkandung dalam kata, jika ada huruf akan muncul dan begitu seterusnya sampai user dapat menebak keseluruhan huruf yang membentuk kata.

Konsep yang digunakan:

Random, Function, If-Else Statement, Dictionary, List, Tuple, For Loop, While Loop, Bolean, dan Input-output

Tebak Angka

Dari namanya permainan ini sudah tertebak akan berbentuk seperti apa. Permainan ini melibatkan komputer yang akan memilih secara acak angka 1-100 dan disimpan, kemudian user akan menebak angka dari 1-100 yang disimpan oleh komputer. Jika tebakan user lebih besar dari angka yang disimpan komputer, akan keluar notifikasi bahwa angka tebakan terlalu besar, begitu juga sebaliknya.

Konsep yang digunakan:

Random, Function, If-Else Statement, While Loop, Integer, Input-output, dan Execption

Inilah 9 Plugin Terbaik Sublime Text Yang Wajib Di Install Untuk Programmer

Site Komputer - Sublime Text merupakan teks editor yang canggih untuk kode, markup, dan prosa. Sublime Text memiliki antarmuka yang polos, dengan fitur yang luar biasa, dan memiliki kinerja yang luar biasa.

Fitur dan kinerja yang luar biasa tersebut terletak pada plugin yang bisa kita install dengan mudah. Plugin Sublime tersedia sangat banyak sekali dan sebagian besar dari antaranya gratis. Berikut ulasan 9 plugin sublime yang wajib diinstal programmer untuk menambah kinerja sublime text.

1. Package Control

Package control merupakan fitur package manajer. Plugin ini harus diinstal terlebih dahulu setelah SublimeText diinstal.

Dengan menggunakan package control, kita dapat menginstal, meng-upgrade, menghapus dan melihat paket atau plugin pada SublimeText kita dengan sangat mudah. Untuk menginstal package control, dapat dilakukan dengan langkah berikut ini:

Langkah pertama, buka jendela console dengan menekan ctrl+` atau View - Show Console. Setelah terbuka, paste kode ini sesuai versi SublimeText

Sublime Text 2

import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Sublime Text 3

import urllib.request,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

kode tersebut menciptakan folder pada Sublime Text, kemudian akan men-download paket control Sublime Text ke dalamnya.

Jika ketika console tidak berfungsi, langkah kedua yang dapat kita lakukan adalah melakukan instalasi package control, dengan cara:

1. Klik Preferences dan pilih Browse Packages
2. Buat folder dengan nama Installed Packages
3. Download Package Control.sublime-package dan simpan pada direktori Installed Packages yang telah dibuat sebelumnyaCara menggunakannya: ctrl + shift + p (pada windows/linux) atau cmd + shift + p (pada OS X)

2. Alignment

Alignment merupakan keselarasan pada teks atau tulisan. Pada SublimeText juga terdapat alignment, dapat dilakukan dengan cara manual. Tetapi, dengan menggunakan plugin Alignment ini, kita dapat mengatur keselarasan tulisan/teks yang kita buat secara cepat menggunakan quick key.

Fitur-Fitur yang disediakan, seperti :

• menyelaraskan semua baris yang terpilih dengan menyisipkan spasi atau tab sesuai baris pertama yang dipilih
• menyelaraskan semua baris yang terpilih dengan tingkat level indent yang sama
• menyelaraskan semua baris yang terpilih yang terdapat simbol '=' dengan menyisipkan spasi

Untuk menginstal alignment pada SublimeText 2 maupun SublimeText 3, dapat dilakukan dengan langkah-langkah berikut ini:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan Alignment, lalu enter. Langkah ketiga, pastikan pada Preferences - Package Setting - Aligment - [ Setting User ] dan [ Key Bindings User ] terdapat syntax seperti berikut:

Kita dapat copy syntax dari Preferences - Package Setting - Aligment - [ Setting Default ] dan [ Key Bindings Default ]. Cara menggunakannya: ctrl + alt + a (pada windows/linux) atau cmd + alt + a (pada OS X)

3. All AutoComplete

Sejatinya, sublime menyediakan layanan auto complete berdasarkan kata yang pernah diketikkan dalam file yang sama. Tetapi, sublime kini menyediakan tools dengan nama All AutoComplete yang merupakan plugin tambahan yang berguna untuk melengkapi teks secara otomatis dengan menampilkan berbagai kemungkinan sesuai kata yang kita ketik. Dengan all auto complete, kita dapat dengan cepat dan mudah untuk main coding.

Cara instalnya, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan All AutoComplete, lalu enter.

4. DocBlockr

DocBlockr merupakan plugin pembuat comments/komentar yang berguna untuk dokumentasi. Hanya saja, docblockr dibuat dengan sangat memudahkan dalam penggunaannya. Dengan hanya mengetikkan '/**' dan enter, sublime yang telah terinstall docblockr akan secara otomatis membuatkan dokumentasi atau penjelasan dengan parsing fungsi, parameter, variabel, dan beberapa dokumentasi lain yang memungkinkan untuk dibuat.

Cara instal DocBlockr, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan DocBlockr, lalu enter. Langkah ketiga, copy Setting Default pada docblockr dan paste ke Setting User pada docblockr.

5. SideBarEnhancements

SideBarEnhancements merupakan plugin tambahan yang menyediakan operasi pada side bar file dan folder pada SublimeText.  Operasi tambahan lain pada SideBarEnhancements ialah:

• Menyediakan operasi penghapusan file ke Recycle, open with, dan clipboard.
• Layanan untuk menutup, membuka, memindahkan, dan mengembalikan buffers yang dipengaruhi oleh perubahan nama atau perpindahan command.c. Preferensi untuk mengkontrol jika buffer harus ditutup bila dipengaruhi oleh proses penghapusan.
• Memberikan layanan membuat file/folder baru, membuka atau menjalankan, mencari, meng-cut, copy-paste, mengubah nama, menindahkan, menghapus, dan refresh.
• Kecanggihan lainnya, ialah: menyalin sebagai URI, URL, konten sebagai UTF8, konten sebagai data Base64 URI, salin sebagai image (img/script/style), dan duplicate.
• Memungkinkan untuk menampilkan tanggal perubahan file, dan ukuran file.

6. Terminal

Terminal merupakan tempat eksekusi beberapa program, salah satunya program bahasa c. Plugin terminal digunakan untuk membuka otomatis terminal berdasarkan folder tempat menyimpan file. Hanya dengan ctrl+shift+t, kita dapat langsung membuka terminal dan direktorinya.Cara instal plugin terminal pada sublime, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan terminal, lalu enter. Langkah ketiga, copy [Setting Default ] dan [ Key Bindings Default ] dan paste ke [ Setting User ] dan [ Key Bindings User ] pada Preferences - Packages Setting - Terminal.

7. CanIUse

Plugin CanIUse merupakan layanan tambahan pada sublime text yang berfungsi untuk memeriksa format syntax CSS dan HTML yang dapat digunakan pada browser kita. Hal ini, mempermudah web programmer untuk membuat desain menggunakan CSS. Menggunakannya pun sangatlah mudah, kita dapat melakukannya dengan cara menyorot syntax CSS atau elemen HTML , lalu klik kanan dan pilih Can I Use, maka akan langsung membuka halaman CanIUse.com.

Cara instal plugin CanIUse, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan CanIUse, lalu enter.

8. CSSComb

CSSComb merupakan plugin tambhan pada SublimeText dengan fungsi untuk mengurutkan syntax CSS berdasarkan sifatnya. CSSComb menjadikan kodingan yang kita buat menjadi rapi, terurut dengan benar, dan konsisten. Hal ini juga membantu menggabungkan kode yang dikerjaan oleh banyak pekerja / tim pengembang yang mengerjakan masing-masing.

Cara menggunakan dapat dengan cara: blok/ sorot syntax dan klik crtl + shift + c (Tools - Run CSSComb) atau dengan klik kanan pilih Run CSSComb.


Cara instal plugin CSSComb, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan CSSComb, lalu enter. Langkah ketiga, copy [Setting Default ] dan [ Key Bindings Default ] dan paste ke [ Setting User ] dan [ Key Bindings User ] pada Preferences - Packages Setting - CSSComb.

9. Trimmer

Trimmer merupakan plugin tambahan SublimeText yang berguna untuk membantu menghapus spasi yang tidak berguna dan dapat menyebabkan kesalahan pada kode JavaScript. Cara menggunakannya pun sangat musah, hanya dnegan blok / sorot dan klik ctrl + shift + s. Fitur-fitur lain yang dapat kita gunakan setelah install trimmer adalah:

Memotong spasi diawal dan/atau diakhir setiap baris, menghapus baris kosong / garis spasi, menghapus karakter spasi, mengganti beberapa simbol yang tidak sesuai, seperti:

• Smart single quotes: ’‘ menjadi ''
• Smart double quotes: “” menjadi ""
• Ellipsis: … menjadi ...
• Em dash: — menjadi ---
• En dash: – menjadi --
• Middle dot: • menjadi *
• Cara instal plugin Trimmer, dengan langkah-langkah berikut:

Langkah pertama, pastikan Package Control telah terinstal. Lalu lakukan Install Package melalui Command Pallete, dapat ditemukan dengan cara Tools - Command Pallete atau Preferences - Package Control (ctrl +shift + p), dan ketikan Install Package, lalu enter. Langkah kedua, tunggu hingga install package selesai. Jika telah selesai, command pallete akan tampil kembali dan ketikkan trimmer, lalu enter. Langkah ketiga, copy [Setting Default ] dan [ Key Bindings Default ] dan paste ke [ Setting User ] dan [ Key Bindings User ] pada Preferences - Packages Setting - Trimmer.

Pengertian dan Perbedaan HTML, XML dan XHTML

Site Komputer -  Dalam postingan kali ini mimin akan membahas mengenai html, xml dan xhtml, mungkin bagi sebagian orang yang bergulat di dunia website pasti sudah paham betul mengenai pengertian, fungsi, dan berbedaan diantara html, xml dan xhtml tersebut.

Disi mimin akan membahas mengenai pengertian, fungsi serta perbedaan diantara html, xml dan xhtml tersebut. jika kalian tertarik untuk membahasnya silakan baca ketahap selanjutnya.

Pengertian dan Perbedaan HTML, XML dan XHTML 

Pengertian HTML

HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Baca Juga

• Apa Itu PHP? Mengenal PHP dan Pengertian PHP
• Apa Itu CSS? Mengenal CSS dan Pengertian CSS
• Apa Itu HTML? Mengenal HTML dan Pengertian HTML

Apa yang dapat dilakukan dengan HTML?

MemodifIkasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

• Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
• Kita dapat menampilkan teks dalam bentuk cetakan tebal
• Kita dapat menampilkan sekelompok kata dalam bentuk miring
• Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
• Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
• Menampilkan daftar sesuatu dalam bentuk point-point (item) Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami Membuat link.

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web.

Ada tiga macam link yang dapat kita gunakan :

• Link menuju bagian lain dari page
• Link menuju page lain dalam satu web site
• Link menuju resource atau web site yang berbeda

Menyisipkan citra 

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

Menampilkan informasi dalam bentuk tabel 

Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.

Pengertian XML

XML (eXtended Markup Language) adalah bahasa markup yang digunakan untuk menyimpan data (tidak ada program) dan tidak tergantung dengan tools tertentu (seperti editor, dbms, compiler, dsb). Jika demikian, Lalu digunakan untuk apa dokumen XML ini?

XML adalah merupakan suatu bahasa Markup. Markup yaitu bahasa yang berisikan kode-kode berupa tanda-tanda tertentu dengan aturan tertentu untuk memformat dokumen teks dengan tag sendiri agar dapat dimengerti.

Perbedaan antara XML dan HTML

Perlu di ingat bahwa:

• XML bukan merupakan pengganti HTML.
• XML dan HTML yang dirancang dengan tujuan yang berbeda:
• XML dirancang untuk transportasi dan menyimpan data, dengan fokus pada apa data.
• HTML dirancang untuk menampilkan data, dengan fokus pada bagaimana data terlihat.
• HTML adalah tentang menampilkan informasi, sedangkan XML adalah membawa informasi tentang.

Keuntungan XML

- Ekstensibilitas : dapat ditukar/digabung dengan dokumen XML lain
- Memungkinkan pemrograman yang lebih baik

Maka dibuat suatu software pengolah XML

- Memisahkan data dan presentasi. Yang akan direpresentasikan dalam XMLdan XSLT
- Pencarian data cepat karena XML merupakan data dalam format yang terstruktur
- Plain Text dan platform independent
- Untuk pertukaran data

Dokumen XML dapat digunakan untuk berbagai macam tujuan, seperti:

• Sebagai penyimpan data (database) yang mudah dibaca oleh user karena disimpan dalam bentuk teks.
• Standard transfer data, dapat digunakan untuk pengiriman data transaksi antar perusahaan, atau mentransfer data dari DBMS yang berbeda (mis: Oracle ke SQL Server).
• Sebagai acuan membuat bahasa baru, seperti WML (Wireless Markup Language) yang digunakan pada mobile device dengan protokol WAP, atau VoiceXML yang digunakan sebagai bahasa markup untuk pengenalan suara, dialog, aplikasi interaksi respon suara maupun DTMF (seperti aplikasi pengisian pulsa atau call center), dan sebagainya.
• Sebagai file konfigurasi, di Java dokumen-dokumen XML sering kita jumpai seperti file server.xml dan web.xml yang digunakan Tomcat, atau perintah-perintah query yang disimpan dalam file XML yang dipakai pada framework iBatis atau Hibernate.

Sejauh mana perkembangannya? XML menjadi dasar dari beberapa bahasa markup yang telah sedang berkembang sampai saat ini, seperti: XHTML (perbaikan dari HTML), VoiceXML (bahasa untuk aplikasi suara, telepon), XForms (form pada web yang dapat digunakan pada berbagai macam jenis browser, seperti: desktop, PDA , handphone, kertas), XPath, XPointer, XSL dan XSLT (transformasi dan presentasi XML).

Pengertian XHTML

XHTML adalah Gabungan dari XML (Extensible Markup Language) dan HTML (HyperText Markup Languang), jadi dapat di artikan Extensible HyperText Markup Language (XHTML) bentuk HTML dikombinasikan dengan sintaks XML.

Secara umum dalam penulisannya hampir sama dengan HTML, hanya memiliki aturan yang ketat, berikut secara umum penulisan XHTML :
Penulisan XHTML :

Penulisannya harus selalu ditutup

<p>Contoh tulisan</p>
<br />
<hr />

Penulisan harus huruf kecil

<body>
<p>teks</p>
</body>

Penulisan hanya memiliki satu elemen

<html>
<head>...</head>
<body>
 ...
</body>
</html>

Penulisan atribut harus dalam quote ("")

<table width="100%">
Penulisan atribut tidak dapat disederhanakan
<input checked="checked" />
<option selected="selected" />

Penulisan atribut NAME dapat diganti dengan ID atau di gunakan ke dua-duanya

<img src"" id="namegambar">

Elemen yang wajib / minimal di XHTML :

DOCTYPE
head
body

Apa Itu PHP? Mengenal PHP dan Pengertian PHP

Apa Itu PHP? Mengenal PHP dan Pengertian PHP

Pengertian PHP

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).

Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.

PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.

Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer seperti Joomla, Drupal, dan WordPress.

Dikutip dari situs w3techs.com, (diakses pada 18 Desember 2014), berikut adalah market share penggunaan bahasa pemrograman server-side untuk mayoritas website di seluruh dunia :

Dapat dilihat dari tampilan diatas bahwa mayoritas website modern saat ini menggunakan PHP.

Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.

Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.

Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.

Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini:

<! DOCTYPE html> <font> </ font>
<html> <font> </ font>
   <head> <font> </ font>
      <title> Contoh daftar dengan HTML </ title> <font> </ font>
   </ head> <font> </ font>
<body> <font> </ font>
<h2>Daftar Absensi Mahasiswa</h2><font></font>
   <ol> <font> </ font>
      <li> Nama Mahasiswa ke-1 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-2 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-3 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-4 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-5 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-6 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-7 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-8 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-9 </ li> <font> </ font>
      <li> Nama Mahasiswa ke-10 </ li> <font> </ font>
   </ ol> <font> </ font>
</ body> <font> </ font>
</ html>

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-paste tag <li> sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-paste tersebut menjadi tidak efektif.

Jika menggunakan PHP, kita tinggal membuat perulangan for sebanyak 1000 kali dengan perintah yang lebih singkat seperti berikut ini:

<! DOCTYPE html> <font> </ font>
<html> <font> </ font>
   <head> <font> </ font>
      <title> Contoh daftar dengan PHP </ title> <font> </ font>
   </ head> <font> </ font>
<body> <font> </ font>
<h2>Daftar Absensi Mahasiswa</h2><font></font>
   <ol> <font> </ font>
      <? php <font> </ font>
      untuk ($ i = 1; $ i <= 1000; $ i ++) <font> </ font>
         {<font> </ font>
            echo "<li> Nama Mahasiswa ke- $ i </ li>"; <font> </ font>
         } <font> </ font>
      ?> <font> </ font>
   </ ol <font> </ font>
</ body> <font> </ font>
</ html>

Dengan menggunakan kode baris yang bahkan lebih sedikit, kita dapat membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya mengubah sebuah variabel $i.

PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal lain yang bisa kita lakukan dengan PHP, seperti menginput data ke database, menghasilkan gambar, menkonversi halaman text menjadi PDF, management cookie dan session,

Apa Itu CSS? Mengenal CSS dan Pengertian CSS

Apa Itu CSS? Mengenal CSS dan Pengertian CSS

Pengertian CSS

Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:

<! DOCTYPE html>
<html>
<head>
      <title> Tag Tag Font HTML </ title>
</ head>
<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
  <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color = "red"> teks, warna, gambar dan belakang belakang </ font>
    dari (hampir) semua kode tag HTML.
  </ p>
</ body>
</ html>

Contoh HTML tanpa CSS

Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

<! DOCTYPE html>
<html>
<head>
   <title> Uji Latar Belakang Warna CSS </ title>
   <style type = "text / css">
     .warna {
       warna merah;
     }
   </ style>
</ head>

<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang digunakan untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya adalah HTML</span>.
    <br />
      Dengan CSS kita bisa mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua kode tag HTML.
    </ p>
</ body>
</ html>

Contoh HTML dengan CSS

Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS.

Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. (Lebih lanjut tentang tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.

CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Dalam tutorial selanjutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.

Apa Itu HTML? Mengenal HTML dan Pengertian HTML

Apa Itu HTML? Mengenal HTML dan Pengertian HTML

Disini saya hanya akan memberitahukan dasar html. Apa itu HTML? Pertanyaan yang sering muncul untuk seorang pemula yang baru memulai proses belajar web.

Apa itu HTML?

HTML adalah kepanjangan dari Hypertext Markup Language dan merupakan salah satu bahasa yang paling banyak digunakan dalam mebuat halaman web.

Pengertian HTML

• HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.

• Hypertext mengacu pada cara di mana halaman web (dokumen HTML) dihubungkan. Jadi, link yang tersedia pada halaman web disebut Hypertext.

• Seperti namanya, HTML adalah bahasa Markup yang berarti kamu menggunakan HTML hanya untuk “mark-up” dokumen teks dengan tag yang akan memberitahukan browser struktur untuk menampilkan sebuah desain layout web.

• Awalnya, HTML dikembangkan dengan maksud untuk mendefinisikan struktur dokumen seperti judul, paragraf, daftar, dan sebagainya untuk memudahkan berbagi informasi ilmiah antara peneliti.

• Sekarang, HTML banyak digunakan untuk membuat format halaman web dengan bantuan tag yang berbeda dalam bahasa HTML.

• File HTML tidak lebih dari file teks sederhana, yang membuat kita saat mulai menulis dalam HTML, hanya memerlukan teks editor sederhana saja.

• Misalnya ada Notepad yang merupakan teks editor yang selalu kita temukan pada komputer berbasis Windows, kalau bingung cara menemukan notepad kamu bisa search distartup menu Windows, saya yakin kamu sudah pada tahu cara membuat notepad. Untuk komputer Mac OSX datang dengan bundel TextEdit. Ada banyak teks editor yang bisa kamu gunakan untuk menulis kode html, dari yang editor sederhana maupun yang lebih advance.

Untuk pertama coba ketikan kalimat dibawah ini pada notepadmu atau teks editor yang kamu gunakan :

<html>
<head> 
<title>Judul</title>
</head>
<body>
<p>Ini halaman web pertama saya. Harap maklum.</p>
</body>
</html>

Sekarang silahkan buat folder dengan nama latihan_html kemudian simpan file yang sudah kami buat dengan nama “latihanhtmldasar.html” kedalam folder yang sudah kamu buat sebelumnya.

Jika kamu menggunakan notepad berhati-hatilah. Ingat saat menyimpan file harus menggunakan ekstensi “.html”, biasanya notepad secara otomatis akan menyimpannya sebagai “.txt”, tidak cuma notepad saja sih, tapi mungkin beberapa teks editor lainnya juga gitu.

Kamu juga perlu memastikan bahwa file yang sedang disimpan sebagai teks biasa. TextEdit, misalnya, akan memulai file baru sebagai “Rich Text Format“, yang mengandung banyak format tambahan secara default. Dalam kasus tersebut, masuk ke-preferences  dan pastikan kamu memeriksa dan sudah memilih format “Plain text” sebelum membuat file baru.

Untuk melihat hasil file HTML yang sudah kamu buat sebelumnya, kamu bisa langsung klik dua kali (open) file tersebut. Kamu akan langsung melihat tampilan web pertamamu yang berisi tulisan “ini halaman web pertama saya. Harap maklum”.

Dalam artikel ini kami telah mengatakan untuk menggunakan teks editor sederhana, seperti Notepad misalnya, tetapi kamu mungkin akan tergoda untuk menggunakan software khusus seperti Adobe Dreamweaver. Kamu harus sangat berhati-hati ketika menggunakan program ini, terutama jika kamu seorang pemula, karena program ini sering memberi kode yang tidak perlu atau non-standar untuk “membantu”-mu.

Jika kamu serius tentang belajar HTML, kamu harus membaca tutorial seperti ini dulu, sehingga kamu setidaknya memiliki pemahaman dasar tentang apa yang sedang terjadi. Software seperti ini tidak akan pernah memberikan kontrol yang sama atas halaman web seperti coding by hand.

Jika kamu memutuskan untuk menggunakan  kode-editing khusus, kami merekomendasikan satu di mana kamu masih coding by hand. Mereka dapat, pada kenyataannya, sangat membantu, terutama lebih maju kamu, dalam hal sintaks kode menyoroti dan manajemen file.