Showing posts with label Web Aplikasi sederhana. Show all posts
Showing posts with label Web Aplikasi sederhana. 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