Cara menampilkan text atau tulisan menggunakan PHP

11:02 AM 2 Comments
Selamat datang kembali pembaca yang budiman.. Saya tahu bahwa anda yang membuka artikel ini adalah orang-orang yang mengerti bahwa belajar adalah Penting, dan membaca adalah cara terbaik untuk belajar.

Pada kesempatan kali ini, Akang Pewe ingin berbagi tentang bagaimana menampilkan text atau tulisan di browser dengan menggunakan PHP. Tapi kalian harus sudah terinstall XAMPP untuk dapat menjalankan PHP pada komputer kalian.


Dalam pemograman PHP, ada beberapa script untuk menampilkan text, diantaranya adalah :


Menggunakan perintah "echo"

  1. Buatlah sebuah folder latihan, pada folder htdocs, apa saja boleh. Sebagai contoh saya buat folder dengan nama "latihan"
  2. Bukalah text editor untuk membuat script php, untuk yang belum tau atau sedang mencari text editor yang bagus silahkan cek disini : Aplikasi Editor HTML yang bisa juga digunakan untuk membuat script PHP.
  3. Buatlah sebuah file, beri nama dengan "latihan1.php" taruh di dalam folder "latihan" tadi. Ingat.. Setiap script PHP selalu menggunakan ekstensi ".php" dibelakang nama filenya.
  4. Copy dan Paste Script Di bawah ini :
     <!doctype html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Latihan Menampilkan Tulisan Di Browser</title> 
     </head> 
     <body> 
     <?php echo "Menampilkan tulisan di browser!"; ?> 
     </body> 
     </html> 

Kemudian jalankan script pada browser dengan URL sesuai dengan folder "latihan" tadi, di ikuti dengan nama file nya, misal : "http://localhost/latihan/latihan1.php".
Bagian script yang berwarna merah di atas adalah script untuk menampilkan tulisan pada browser dengan menggunakan PHP.


Semoga artikel ini bermanfaat..

Terimakasih telah berkunjung. :)

Cara membuat form di HTML

10:06 AM Add Comment
Didalam sebuah website terkadang kita melihat ada sebuah kotak yang bisa di isi, atau tombol. Ya, benar, itu merupakan bagian dari sebuah form.
Apa itu form?
Form adalah sebuah interface untuk user atau pengguna untuk melakukan inputan yang kemudian akan di proses oleh aplikasi sesuai dengan method dan action yang digunakan.

Nah, sesuai dengan tema atau judul di atas "cara membuat form di html", kali ini penulis akan berbagi cara membuat form pada HTML.
Perhatikan Kode Di bawah ini :


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Form</title>
</head>
<body>
<form action="http://www.test.com/kirim">
<p>
<label>Nama</label>
<input type="text" name="nama">
</p>
<p>
<label>Pesan</label>
<textarea name="pesan"></textarea>
</p>
<p>
<button type="submit">Kirim</button>
</p>
</form>
</body>
</html>
Perhatikan script yang berwarna merah.
Tag <form></form>, adalah tag yang di gunakan untuk membuat form di html.
atribut action="" berguna sebagai tujuan dimana data dari form akan dikirim.
Sebenarnya masih banyak lagi attribut yang bisa di gunakan pada form, seperti method, id, name, enctype, dan lain-lain. yang nanti akan saya bahas pada postingan berikutya.

Demikian sedikit yang bisa saya bagikan tentang cara membuat form di html, jika ada pertanyaan, silahkan berkomentar di kolom komentar.
Terimakasih telah berkunjung.

Cara membuat background berwarna - HTML

1:15 AM Add Comment
Kali ini penulis akan berbagi cara membuat background warna pada HTML.
Perhatikan Kode Di bawah ini :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PondasiWeb.blogspot.com</title>
</head>

<body bgcolor="red">
<h1>PondasiWeb.blogspot.com</h1>
<h1>Background Merah</h1>
</body>
</html>
Didalam Tag body, terdapat attribut bgcolor yang berfungsi merubah background. bgcolor dapat di isi dengan kode warna dalam Hexa ataupun RGB, tergantung dengan kebutuhan anda.
Sekian dahulu, untuk bahasan kali ini,, semoga artikel cara membuat background berwarna  ini, bisa bermanfaat.

Membuat Tabel Di HTML

11:55 PM Add Comment


Selamat datang kembali di Pondasi Web, kali ini saya akan berbagi bagaimana cara Membuat Tabel Di HTML.

Perhatikan Skrip dibawah ini :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat Tabel HTML</title>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Barang</th>
                <th>Jumlah</th>
                <th>Satuan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Buku</td>
                <td>50</td>
                <td>pcs</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Pensil</td>
                <td>20</td>
                <td>pcs</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Pulpen</td>
                <td>40</td>
                <td>pcs</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>No</th>
                <th>Nama Barang</th>
                <th>Jumlah</th>
                <th>Satuan</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>
 Penjelasan :

  1. <table> adalah tag yang digunakan untuk membuat tabel.
  2. <thead> adalah tag untuk membuat heading tabel.
  3. <tbody> adalah tag untuk membuat isi tabel / tabel data.
  4. <tfoot> adalah tag untuk membuat footer tabel.
  5. <tr> adalah tag untuk membuat baris pada tabel.
  6. <th> adalah tag yang memuat isi dari heading.
  7. <td> adalah tag yang memuat data dari tabel.
Semoga artikel cara Membuat Tabel Di HTML ini bisa bermanfaat, jika ada yang ingin di tanyakan silahkan beri komentar.

Cara Menampilkan Gambar di HTML

11:07 PM Add Comment

Selamat datang kembali di Pondasi Web, kali ini saya akan berbagi bagaimana cara menampilkan sebuah gambar di HTML.

Perhatikan skrip di bawah ini:

<html>
<title>Menampilkan gambar di HTML</title>
<body>
<img src="contoh.png" widht="300" height="200" />
</body>
</html>
Penjelasan :
  1. <img> adalah tag yangdigunakan untuk memanggil file gambar.
  2. src adalah attribut untuk mendeklarasikan lokasi file.
  3. widht dan height adalah attribut untuk mengatur ukuran gambar.

Semoga artikel Cara Menampilkan Gambar di HTML ini bisa bermanfaat, jika ada yang ingin di tanyakan silahkan beri komentar.

Membuat Heading dan Paragraf HTML

7:00 AM Add Comment

Untuk membuat heading dapat digunakan tag berikut :
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Paragraf.</p> 
</body>
</html>
Heading HTML terdiri dari 6 macam heading. Anda bisa menggunakannya sesuai kebutuhan anda.

Paragraf dalam HTML selalu di awali dengan kode "<p>" dan ditutup dengan "</p>". 

Aplikasi Editor HTML

6:52 AM Add Comment
Berikut adalah sebagian aplikasi yang dapat digunakan untuk menulis skrip HTML. 

CoffeeCup Free HTML Editor

CoffeeCup Free HTML Editor merupakan versi gratis dari produk berbayar, dan karena ini versi grati maka beberapa fitur pada aplikasi ini dihilangkan seperti desain menu CSS dan Upload menggunakan FTP.
Ada banyak fitur editing yang bagus pada aplikasi ini dan sebuah “Help File” akan memandu kamu untuk menggunakan dan memanfaatkan semua fitur pada aplikasi ini untuk bagian-bagian yang rumit, dan kamu juga dapat meng-upload halaman web kamu pada platform S-Drive CoffeeCup, di mana layanan ini tersedia secara gratis.

Link Download


Notepad++

Notepad++ adalah editor source code yang luar biasa dengan banyak fitur. Syntax highlighting akan membuat kamu lebih mudah untuk membaca dan memahami kode kamu.
Code folding memungkinkan kamu untuk collapse /menutup beberapa area kode untuk sementara agar kamu dapat fokus pada area lainya yang sedang kamu kerjakan. Auto-completion membantu kamu memasukkan kode  lebih cepat (dan akurat).

Link Download


PageBreeze

Web designer berpengalaman  tidak akan terkesan dengan aplikasi ini karenaPageBreeze masih didasarkan pada teknologi lama, tetapi jika kamu hanya mencari aplikasi hanya untuk menciptakan sesuatu yang sangat sederhana maka itu menjadi cerita yang berbeda.
Dengan aplikasi ini kamu dapat menambahkan link, gambar, dan tabel dalam satu atau dua klik. Sangat mudah untuk melihat dan mengedit semua halaman situs kamu, dan ketika kamu sudah selesai built-in klien FTP akan membantu kamu menempatkan pekerjaan kamu secara online. Walaupun hasil akhir mungkin sangat mendasar, kesederhanaan program membuatnya layak untuk pemula.

Link Download


Firebug

Kamu telah selesai merancang situs web, tetapi tidak cukup terlihat atau bekerja seperti yang diharapkan, di saat itulah ekstensi Firefox : Firebug  akan membantu kamu untuk melihat kode HTML dan CSS; menyesuaikan style dan melihat hasilnya saat itu juga di browser.
Selain itu Firebug  akan membantu kamu untuk memahami layout halaman web kamu, melakukan debug dan log JavaScript, mengelola cookie, menganalisis load halaman, memeriksa pesan kesalahan dan banyak lagi.
Jelas ada banyak fitur yang sangat kuat pada Firebug, tapi Firebug tidak hanya untuk ahli web. Pada awalnya kamu mungkin hanya menggunakannya untuk beberapa hal dasar seperti melihat kode html, namun hal kecil seperti ini akan sangat mebantu kamu

Link Download


Bluefish Editor

Bluefish merupakan aplikasi editor programmer web yang juga mencakup banyak alat web pilihan.  Bluefish dimulai dengan trik editing biasa: sintaks (ASP.NET, CSS, HTML, JavaScript, PHP dan banyak lagi didukung), code folding, alat pencarian yang kuat, autocompletion, dan banyak lagi.
Program ini juga mendukung template dokumen, memiliki wizards untuk menambahkan CSS, forms, tabel, audio dan objek video, lalu adanya tag editing dan pratinjau dari dokumen dan banyak lagi.

Link Download


Brackets

Brackets adalahe kode editor HTML, CSS dan, JavaScript yang menarik, dibuat dan dikelola oleh Adobe.
Program ini dirancang untuk mencegah kekacauan pada workspace kamu dengan floating toolbar dan ikon yang besar, dimana memungkinkan kamu untuk bekerja secara langsung pada kode dengan bantuan banyak shortcuts.
Contoh penguunaannya adalah ketika kamu meng-Klik tag HTML, lalu tekan Ctrl + E dan kamu akan melihat Quick Edit dengan CSS terkait, cukup pilih salah satu yang kamu butuhkan dan kamu akan dapat mengeditnya langsung.
Brackets juga sangat baik digunakan suntuk mengedit kode JavaScript. Dengan adanya fitur “Live Preview” kamu tidak perlu untuk me-refresh browser kamu setiap ingin melihat perubahan karena tampilanya akan segera diperbarui secara otomatis.

Link Download


KompoZer

KompoZer memang belum diperbarui untuk beberapa waktu, namun KompoZer masih bisa menjadi editor web yang berguna untuk pemula.
Program ini bekerja seperti pengolah kata sederhana, sehingga kamu tidak perlu tahu tentang HTML, CSS, scripting atau apa pun: hanya memasukkan teks, format, dan klik berbagai tombol untuk menambahkan link, menyisipkan tabel, gambar, dan lainnya.

Link Download


OpenBEXI HTML Builder

OpenBEXI adalah editor HTML WYSIWYG yang memungkinkan kamu untuk membuat halaman web hanya dengan dragd dan dropp “widget” – segala hal mulai dari teks, link dan gambar, graphs, flowcharts. kamu juga bisa melakukan tweaking item-item tersebut sesuai dengan kebutuhan kamu.
OpenBEXI juga memungkinkan kamu untuk men-tweak CSS atau menambahkan script ke halaman, dan built-in FTP klien akan mambantu kamu meng-upload file ke server.

Link Download


GIMP

Setiap web designer harus memiliki graphics tools yang baik, dan GIMP adalah salah satu editor gambar gratisan terbaik yang beredar saat ini.
GIMP memiliki fitur retouching photo yang mengesankan, banyak efek khusus yang berguna, berbagai paint tools dan banyak lagi.

Link Download


BlueGriffon

BlueGriffon merupakan editing tool WYSIWYG yang mengambil pendekatan mudah untuk mengedit web, walaupun begitu pada BlueGriffon  terdapat fitur yang kuat.
Kamu bisa menggunakan BlueGriffon untuk mengetik teks, menyisipkan gambar, tabel, file audio, video dan sebagainya. Lebih jauh dengan aplikasi ini terdapat SVG editor, form design tools, beberapa dukungan CSS, pemeriksa aksesibilitas, DOM Explorer, dan banyak lagi.

Link Download

Sekian beberapa aplikasi untuk edit HTML, semoga bisa menjadi referensi untuk kamu yang sedang mulai belajar membuat web. Terimakasih telah berkunjung...

Subscribe to: Posts ( Atom )