DASAR-DASAR MEMBUAT WEB DENGAN HTML

April 26, 2017
DASAR-DASAR MEMBUAT WEB DENGAN HTML


Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???
Nggak ada kan??? nah, maka dari itu, saya, C.H.I.P. Sensei, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,  ada yang perlu diketahui.

tag <>
digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.
Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.
LANGKAH 1

·                     MEMBUKA NOTEPAD.
LANGKAH 2

·                     MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.

Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,  yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

Sekian tutorial dari C.H.I.P. Sensei. Meskipun sedikit semoga bermanfaat untuk anda yang baru memulai membuat website menggunakan HTML.

MEMBUAT KOMENTAR PADA ARTIKEL


Sering kita temui halaman-halaman tutorial pada web yang selalu memiliki fasilitas untuk memberikan komentar kepada penulisnya, maupun tulisannya. Sering pula ditemui komentar-komentar yang tidak diinginkan selalu hadir meramaikan isi komentar.
Ya langsung saja saya berikan sedikit penjelasan bagaimana cara membuatnya, yang perlu kita butuhkan untuk memasukkan komentar adalah halaman tutorial itu sendiri disamping fasilitas untuk memasukkan komentar.

Sehingga diperlukan sebuah tabel yang berfungsi untuk menyimpan isi artikel/tutorial dan sebuah tabel lagi yang digunakan untuk menyimpan komentar.
Berikut ini adalah struktur tabelnya :
create table artikelnya (id int(5) primary key auto_increment, penulis varchar(50), judul varchar(50) not null, isi_artikel text );
Kemudian tabel untuk menyimpan komentarnya :
create table komentarnya (id int(5) primary key auto_increment, nama_komentar varchar(40), email_komentar varchar(30), isi_komentar varchar(200), id_artikel int(50));
Langkah selanjutnya adalah membuat php script untuk membuat koneksi antara mysql dengan php, berikut ini adalah scriptnya :
config.php
<?php
$host     = “localhost”;
$username = “root”;
$password = “”;
$databasename = “cms_artikel”;
$connection = mysql_connect($host, $username, $password);
mysql_select_db($databasename, $connection) ;
?>
Kemudian script untuk menampilkan judul artikelnya …
main.php
<?php
require_once “config.php”;
$query    = “select * from artikelnya”;
$runquery = mysql_query($query);
while($result = mysql_fetch_array($runquery))
{
$id = $result['id'];
$judul = $result['judul'];
$isi_artikelnya = $result['isi_artikel'];
$isi = substr($isi_artikelnya,0,400);
$isi = substr($isi_artikelnya,0,strrpos($isi,” “));
print “<b>$judul<br></b>$isi…”;
print “<a href=view.php?page_detil=$id>Selengkapnya</a><br><br>”;
}
?>
Script untuk menampilkan artikel secara keseluruhan …
view.php
<?php
require_once “config.php”;
$id = $_GET['page_detil'];
if (ISSET($_GET['page_detil']))
    {
    $query      = “select * from artikelnya where id=$id”;
    $runquery   = mysql_query($query);
    $result     = mysql_fetch_array($runquery);
    $isi_artikel = $result['isi_artikel'];
    print $isi_artikel ;
    print “<br><a href=main.php>Kembali … </a><br><br>”;
      
    print “<b>Komentarnya : </b><hr>”;
    require_once “comment.php”;
    }
else
print “”;
if ($_REQUEST['entry'] == “comment”)
    {
    $id_artikel = $_POST['id_artikel'] ;
    $nama = $_POST['nama'];
    $komentar = $_POST['komentar'];
    $query2    =  “insert into komentarnya values(”,’$nama’,'$komentar’,'$id_artikel’)”;
    $runquery2 =  mysql_query($query2);
    print “Berhasil di masukkan<br>”;
    print “<a href=view.php?page_detil=$id_artikel>Kembali…</a>”;  
  
    }
?>
Ini adalah script untuk menampilkan komentar, sekaligus form untuk memasukkan komentar
comment.php
<?phprequire_once “config.php”;
$query    = “select nama_komentar, isi_komentar from komentarnya where id_artikel=$id order by id desc”;
$runquery = mysql_query($query);
while ($result = mysql_fetch_array($runquery))
{
$nama_komentar = $result['nama_komentar'];
$isikomentar = $result['isi_komentar'];
print “Nama : $nama_komentar <br> $isikomentar <hr>” ;
}
?>
<html>
<body><br>
<b>Isi Komentar :</b>
<form action=”?entry=comment” method=”post”>
nama : <input type=text name=nama><br>
komentar : <br><textarea name=komentar rows=6 width=200></textarea><br>
<input type=submit name=submit value=submit>
<input type=hidden name=id_artikel value=”<?php print $id ;?>”> </form>
</body>
</html>
Sedikit penjelasan mengenai script-script diatas.
Pada file config.php terdapat koneksi yang menghubungkan php dengan database mysql disitu tertulis
mysql_connect($host, $username, $password);
Yang merupakan inti yang menangani koneksi tersebut.
Dalam file main.php tertulis
$isi = substr($isi_artikelnya,0,400);
$isi = substr($isi_artikelnya,0,strrpos($isi,” “));

Fungsi substr( ) disini berfungsi untuk memotong  value dalam suatu record, dalam kasus ini record isi_artikelnya. Sehingga dalam halaman main.php yang ditampilkan hanyalah 400 karakter pertama, dengan range 0 – 400. Yang tampil pada browser hanya sebagian saja, tidak keseluruhan artikel. Selebihnya di sediakan link “selengkapnya …” untuk melihat artikel secara keseluruhan.
Sedangkan strrpos( ) berfungsi mencari spasi dalam suatu variable dalam hal ini string.
Sehingga bila variable $isi berisi :
“loka keren sekali”    :D~
dan variable tersebut mendapatkan fungsi substr( ) :
$isinya = substr($isi,0,5)
maka yang akan ditampilkan nanti adalah :
“loka k”
Sehingga perlu adanya fungsi strrpos( ) untuk menghilangkan karakter yang tidak perlu.
Sehingga variable $isi mendapatkan fungsi lagi yaitu :
$isinya = substr($isi,0,strrpos($isinya,” “);
Ya, cukup sekian penjelasan saya mengenai tutorial membuat komentar pada artikel. Script ini masih terdapat banyak kekurangan, sehingga saya harapkan anda bisa mengembangkannya sendiri. Selamat mencoba. :D~
Download Ebooknya disini -> Download Semua Ebook Tutorial PHP ilmuwebsite

GENERATE HALAMAN HTML STATIK


Ada alasan ketika sang developer web lebih mengutamakan halaman html statik ketimbang menggunakan halaman dinamis yang dibuat dengan php dan system databasenya, mysql. Kebanyakan hal ini terjadi karena sang developer web dibatasi oleh adanya keterbatasan bandwith yang disediakan oleh pihak hosting, ataupun biasa hal ini terjadi untuk pengiritan bandwith. Ya, beberapa situs besar menggunakan cara seperti ini.
Menggunakan halaman html statik, selain ringan, html statik ini tidak teralu beresiko di segi keamanannya (kecuali sang penyusup mampu menerobos masuk ke dalam server lewat bug yang lain). Dalam tutorial php kali ini saya akan coba memanfaatkan fungsi-fungsi dasar php seperti ‘fungsi handling file’ dalam menggenerate halaman HTML statik dengan menggunakan PHP. Perbedaan antara pembuatan halaman web dinamis dengan generate halaman html statik adalah pada pembuatan halaman web dinamis biasanya cuma menggunakan satu file php saja, namun php dapat membuat banyak halaman hanya dengan satu file tesebut, dalam teknik generate halaman html statik, php menghasilkan banyak halaman html statik yang berbeda isinya. Oke, intronya penulis cukupkan. Kita akan coba masuk ke dalam teknis generate halaman HTML statik dengan PHP.
Kita membutuhkan 2 file yang berbeda, file pertama adalah halaman form untuk menentukan title, menentukan nama file, dan lain-lain sebagainya, sedangkan halaman kedua digunakan untuk menggenerate halaman html dengan menggunakan atribut pada file sebelumnya.
file htmlformgenerate.html
<html>
<head><title>Generate HTML Pages | By : Loka Dwiartara </title></head>
<body>
<table style=”margin-top:40px” border=”1″ align=”center” width=”50%”>
<caption><h1>Generate HTML Pages</h1></caption>
<form action=”generatehtmlstatik.php” method=”POST”>
<tr><td>Nama Halaman</td><td><input type=”text” name=”nama” size=”40″ /></td></tr>
<tr><td>Judul/Title Halaman</td><td><input type=”text” name=”title” size=”70″/></td></tr>
<tr><td>Meta Keyword</td><td><input type=”text” name=”keyword” value=”dipisahkan dengan , (koma)” size=”70″/></td></tr>
<tr><td>Isi Halaman</td><td><textarea name=”isi” cols=”55px” rows=”10″></textarea></td></tr>
<tr><td></td><td><input type=”submit” name=”buat” value=”buat filenya!” /></td></tr>
</form>
</table>
</body>
</html>
dan terakhir file generatehtmlstatik.php
<?php
$namafile = str_replace(” “, “-”, $_POST['nama']).”.html”;
$buatfile = fopen($namafile, “w+”);
if($buatfile == false)
{
die(“Tidak bisa membuat file, karena permission direktori tidak mengizinkan”);
}
else
{
$isifile = “<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 3.2 Final//EN”>n”
.”<html>n”
.”<head><title>”.$_POST['title'].”</title>n”
.”<meta http-equiv=”content-type” content=”text/html; charset=utf-8”>n”
.”<meta name=”keywords” content=”.$_POST['keyword'].” /></head>n”
.”<body>”.$_POST['isi'].”</body>n”
.”</html>”;
fwrite($buatfile, “$isifile”);
}
fclose($buatfile);
?>
inti dari teknik generate page adalah pada file generatehtmlstatik.php, di mana didalamnya terdapat fungsi yang dapat menggenerate file html.
Seperti dalam baris ini :
mengganti spasi dengan baris, url memerlukan hal ini
$namafile = str_replace(” “, “-”, $_POST['nama']).”.html”;
dan selanjutnya membuat file dengan nama yang telah di tentukan dalam form  htmlformgenerate.html
$buatfile = fopen($namafile, “w+”);
setelah itu mengedit isi file yang telah di buat …
fwrite($buatfile, “$isifile”);



Share this :

Previous
Next Post »
0 Komentar