Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, 27 August 2016

Aplikasi sederhana dengan HTML dan PHP

Malem semua, kebetulan malem ini malem minggu :v dan gregetnya mati listrik di wilayah tempat tinggal ts :3

bahan-bahannya
1. sabun XAMPP :v
2. PC/Laptop Tangtop
3. Niat dan Doa
4. Jari untuk mengetik
5. Mata untuk melihat


ok mari kita bahas cara bikin aplikasi sederhana :3
ok sebelumnya jika ada yg belum tahu bulat tentang apa sih HTML (Hypertext Markup Language) sama Pemberi Harapan Palsu PHP (Hypertext Preproccessor) :3 mari tanya ke rumput yg bergoyang mbah gugel atau ke om wiki :3


ok mari langsung aja saya kasih script sederhananya di bawah :3
utuk penjelasannya di bawahnya lagi :v




1. kita buat folder project kita
folder disini dimaksudkan agar saat kalian bikin project selanjutnya kaga bingung sama aplikasi yg nyampur2 kaya es campur :3
misalnya project_1 letakan di dalam folder xampp/htdocs/disini :3

2. buka text editor kesukaan kalian
ok disini kalian menyiapan text editor buat nanti kalian mijit2 keyboard :3

3. Script 1
Copy bahasa alien HTML ini ke text editor kalian :3

<html>
  <head>
    <title>Aplikasi Sederhana</title>
  </head>
  <body>
  <h1>Aplikasi Sederhana Dengan HTML dan PHP</h1>
  <br>
  <table>
  <form action="proses.php" method="POST">
  <tr><td>Nama Lengkap</td><td><input type="text" name="nama_lengkap"></td></tr>
  <tr><td>Tempat, Tgl Lahir</td><td><input type="text" name="ttl"></td></tr></tr>
  <tr><td>Alamat</td><td><textarea name="alamat"></textarea></td></tr></tr>
  <tr><td><input type="submit" value="Ok Sip"></td></tr>
  </form>
  </table>
  </body>
</html>

lalu simpan dengan nama index.html
contoh jika anda menggunakan notepad biasa :3 sesuaikan dengan editor masing2


lalu buka dengan browser kesayangan kalian lalu ketikan di URL browser dengan 127.0.0.1/project_1

maka akan nongol seperti ini :v



4. penjelasan Script 1

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

tag <head> ... </head> adalah tag tempat menempatkan elemen judul suatu website atau disain suatu website
tag <title> ... </title> adalah tempat dimana judul suatu website berada, coba kalian perhatikan di bagian pojok atas kiri browser kalian saat membuka website, ya tepat sekali title berada di situ :3
tag <body> ... </body> adalah tempat dimana isinya suatu website berada :v bisa kalian isi sesuka hati, contohnya script diatas :v

  <h1>Aplikasi Sederhana Dengan HTML dan PHP</h1>
  <br>
  <table>
  <form action="proses.php" method="POST">
  <tr><td>Nama Lengkap</td><td><input type="text" name="nama_lengkap"></td></tr>
  <tr><td>Tempat, Tgl Lahir</td><td><input type="text" name="ttl"></td></tr></tr>
  <tr><td>Alamat</td><td><textarea name="alamat"></textarea></td></tr></tr>
  <tr><td><input type="submit" value="Ok Sip"></td></tr>
  </form>
  </table>

tag <h1> ... </h1> gunanya untuk header atau kepala :v maximal sampai h7
tag <table ... <table> berguna untuk bikin tabel :3
tag <tr> ... </tr> kepanjangan dari table row fungsinya membuat baris pada table :3
tag <td> ... </td>kepanjangan dari table data fungsinya buat tempat dimana data dalam table di letakan :3
tag <form> ... </form> dipake buat menerima masukan dari user buat di kirim ke server,  action="proses.php" adalah tempat tujuan mengirimkan data dari user ke server,  method="POST" berguna ngasih tau keserver metode apa yg kita pakai apakah POST atau GET :3
tag <input> gunanya buat tempat kalian memasukan karakter, type="text" untuk memasukan karakter text, type="submit" untuk membuat tombol untuk mengirim karakter :3
tag <textarea> ... </textarea> hampir sama dengan input hanya saja tag ini lebih banyak mengisikan karakter :3

5. script 2
nah script sebelumnya berisikan code buat user alias buat pemakai untuk sebuah aplikasi dapat berjalan harus punya script proses :3
contohnya

<html>
  <head>
    <title>Aplikasi Sederhana</title>
  </head>
  <body>
  <h1>Aplikasi Sederhana Dengan HTML dan PHP</h1>
  <br>
  <table>
  <tr><td>Nama Lengkap</td><td> : <?php echo $_POST['nama_lengkap']; ?></td></tr>
  <tr><td>Tempat, Tgl Lahir</td><td> : <?php echo $_POST['ttl']; ?></td></tr></tr>
  <tr><td>Alamat</td><td> : <?php echo $_POST['alamat']; ?></td></tr></tr>
  </table>
  </body>
</html>

lalu simpan dengan cara seperti sebelumnya dengan nama proses.php

tag <?php ... ?> mendefiniskan itu adalah bahasa PHP :3
tag echo hanya untuk php berguna untuk menampilkan suatu data :v
tag $_POST[' ... '] berguna untuk mengambil data yg dikirimkan user ke server :v

6. Uji nyali :v
ok tahap ini adalah tahap uji nyali eh coba maksudnya :v
kalian isikan inputan yg tersedia lalu klik tombolnya :v

setelah di klik tombolnya
jika berhasil maka selamat anda menjadi programer :v



sekian dari saya jika da kesalahan mohon di koreksi kripik pedas dan saran tolong komen aja gan :v 

disana gunung disini gunung di tengah2nya pulau jawa
jika ada umur yg panjang pasti kita berjumpa lagi :v wkwkw :D

wasalam :3


Monday, 6 June 2016

Tag Tag sederhana pada HTML :v

hai ketemu lagi sama saya :v
kali ini saya akan membahas beberapa tag-tag sederhana yg sering di pakai di HTML :v klo belum ada yg tau apa itu sih HTML bisa cek di mari Apaan sih HTML :v

ok kita lanjutin :3
ok bagi yg sering bikin masalah eh makalah maksudnya :v pasti gak asing sama yg namanya underline intalic bold ya kan :v

nah di HTML bisa juga bikin kaya gituan :3 dan gak cuma gitu2 doang ada banyak yg bisa kita lakuin di HTML :v mari kita bahas beberapa aja ya :v

Bold = klo di mikocok wrod (sensored merk :v) kita tinggal klik icon B atau CTRL+B ya kan :v
nah klo di HTML kita perlu <b>Bold</b> biar bisa jadi Bold :v
Italic = <i>Italic</i>
Underline = <u>Underline</u>

gimana? :v
nah ada lagi namanya tag <pre></pre> ini nih buat klo kita ngetik pnajang lebar dan hasilnya akan sama kaya kita ketik :v perlu kalian tau di HTML cuma di akuin 1 spasi :3 jadi klo kalian bikin spasi banyak lebih dari 2 kali bakal di anggep tetep 1 :v

gak ngarti?
nih contohnya :v
misalnya kita ngetik kaya                                          gini nih :v
di browser akan tampil kaya gini :3
misalnya kita ngetik kaya gini nih :v

nah klo pake tag <pre></pre>
<pre>misalnya kita ngetik kaya                                          gini nih :v</pre>
tampilannya kaya gini :v
misalnya kita ngetik kaya                                          gini nih :v
jadi klo pake <pre></pre> akan tampil apa adanya kaya aku ke kamu apa adanya :v

nah yg biasa pake header :3 di HTML di sediakan
Header 1 sampe Header 6 :3
contoh

<h1>Header</h1>

<h2>Header</h2>

<h3>Header</h3>

<h4>Header</h4>

<h5>Header</h5>
<h6>Header</h6>
gimana? :v

di HTML kita juga bisa bikin Hyperlink :v
apaan sih itu? :v itu loh yg www.bla bla klo di klik ke buka di browser :v

contohnye :v
<a href="esaprakosoheryanto.blogspot.co.id">Ini Hyperlink :v</a>
jadinya kaya gini Ini Hyperlink :v

oya yg biasa maen table table -an di ecel(sensored :v) bisa juga bikin table kaya gini :v
misal kita mau bikin kaya gini :v
 scripnya kaya gini nih :3
<table border="1">

<tr><th>No</td><th>Nama Burung</th><th>Kecepatan terbang</th></tr>

<tr><td>1</td><td>Burungnya saya</td><td>100 KM/H</td></tr>

<tr><td>2</td><td>Burungnya teman saya</td><td>90 KM/H</td></tr>

<tr><td>3</td><td>Burungnya teman saya yg satu lagi</td><td>86 KM/H</td></tr>

<tr><td>4</td><td>Burungnya teman saya yg satu lagi juga</td><td>120 KM/H</td></tr>

</table>

nah yg pengen ngatur2 fontnya biar bisa macem2 juga bisa mulai warna, ukuran sampe jenis fontnya :3
contohnya:
<font color="red">ini warna merah :v</font>
<font size="5">ini ukuran 5 :v</font>
<font face="arial">ini jenis huruf arial :v</font>

atau klo di gabung juga bisa
<font color="red" size="5" face="arial">ini warna merah dicampur ukuran 5 pake huruf arial :v</font>

ya sekian dulu dari saya :v mohon maap klo ada kata2 yg kurang enak di mata :v

Apaan sih itu HTML?

ketemu lagi sama saya di sini :v , kebetulan hari ini awal bulan ramadhan, dan selamat menjalankan puasa bagi yg menjalankannya ;)

walaupun blog saya gak rame2 amat ya gpp lah sekali2 nge post :v
kali ini saya akan membahas HTML, sepeti judul diatas, apa sih HTML? , itu taneman apa apaan :v

mungkin itu adalah pertanyaan2 pada orang awam yg sama sekali belum menegerti tentang salah satu bahasa pemprograman web ini :v

ya menurut https://id.wikipedia.org/wiki/HTML Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa)

ada yg bingung sama penjelasan om wiki? ya saya juga bingung :v
mari kita rangkum dan di perjelas, HTML adalah suatu bahasa standar pada pembuatan suatu website, biasanya berisi suatu kode2 (bukan kode2nya cewe ya :v) yg berfungsi mengatur pemformatan suatu website, seperti contoh jika kalian bisa mengetik di mikocok wrod (merk disensor :v) kalian bisa membuat huruf tebal seperti ini, INI HURUF TEBAL dengan cuma klik logo B aja kan :v
klo di HTML kalian cuma perlu pake tag <b>INI HURUF TEBAL</b> biar jadi kaya tadi :v

contohnya kaya gini :v
<html>
   <head>
      <title>
       Ini Judul yg ada di pojokan atas website :v
      </title>
   </head>
 <body>
  <b>Ini isinya website :v</b>
 </body>
</html>


trus klo misalnya ada yg nanya:
Itu apaan sih diatas kode2an gak jelas?
itu namanya kode HTML sederhana :3 mari saya jelaskan
tag <html></html> mendefinisikan bahwa itu HTML :3
tag <head></head> mendefinisikan itu kepalanya itu website :3 bisa diisi macem2 :v kaya nama pembuat website :3
tag <title></title> itu judul dari website itu biasanya ada di pojokan atas kiri :3
tag <body></body> itu fungsinya buat ngisi apa yg kita mau diisiin di webnya itu :3

itu bikin gituan gimana caranya?
ya klo bikin gituan bisa dengan notepad :v atau yg suka ++ :3 bisa juga pake notepad++ banyak juga editor untuk programing kaya sublime, bluefish dll saya sendiri lebih suka sama bluefish :v
biasanya klo bikin kaya contoh diatas bisa buka notepad trus masukin kode diatas trus save as misal namanya ini_nyoba_html.html inget extensinya html trus di typenya ganti jadi all biar bisa di buka di browser klo udah tinggal klik 2 kali file html tadi nanti kebuka di browser kalian :v

klo bikin gituan susah gak?
susah bagi yg belum tau sama sekali, coba bayangin kalian mau bikin telor ceplok, tapi gak bisa nyalain kompornya, didunia ini gak ada yg gak mungkin :v

jadi kesimpulannya kalian harus tau dasarnya dulu ibarat angka di mulai dari 0 1 2 3 4 5 6 7 8 9 10 :v
gak ada yg instan kecuali mie instan :v

artikel diatas di recomendasikan bagi yg ingin belajar HTML tidak recomended buat yg copas buat tugas sekolah ya :v klo mau ya ke om wiki :3

tunggu posting selanjutnya ya tentang beberapa tag HTML :v

ya jadi sekian dulu dari saya :v mohon maaf jika ada kata2 yg tidak enak di hati :3