artikel pemrograman web

Pengertian Web Statis dan Dinamis

    Pengertian Web Statis dan Dinamis - kali ini saya mencoba memberikan informasi Pengertian Web Statis dan Dinamis.Setelah beberapa saat lalu saya memberikan informasi Ciri - Ciri Protokol TCP/IP dan Cara Kerja TCP/IP kali ini saya akan sedikit memberikan informasi mengenai Pengertian Web Statis dan Dinamis.

Pengertian Web Statis

  Web Statis adalah web yang content atau isinya tidak berubah – ubah. Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak dapat diubah secara mudah. Ini dikarenakan karena script yang digunakan untuk membut web statis tidak mendukung untuk mengubah isi dokumen.

   Karena script yng digunakan untuk membuat web statis ini seperti HTML dan Cascading Style Sheet atau biasa disebut dengan CSS. Maka dari itu untuk perubahan isi dokumen pada web statis harus mengubah isi file HTML atau CSS tersebut. Tentunya bagi orang awam atau orang yang tidak mengerti soal program atau script HTML dan CSS akan sangat sulit sekali dilakukan. Untuk itu jika kita ingin mengubah dokumen web statis harus mengerti benar scipt HTML atau CSS atau sering disebut programmer yang dapat melakukan perubahan isi dokumen sebuah web statis.

Web statis ini biasanya digunakan oleh website yang menggunakan HTML, Web Search Engine, atau web Company Profile.

Pengertian Web Dinamis

  Web Dinamis adalah Web yang content atau isinya dapat berubah – ubah setiap saat. Karena dalam teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi user yang menggunakan web dinamis tersebut.

  Untuk perubahan content atau isi dokumen dalam sebuah web dinamis dibilang mudah ketimbang web statis yang harus memiliki keahlian khusus pada bagian scripting web tersebut. Ketika kita akan mengubah content atau isi dari sebuah web dinamis kita hanya perlu masuk kebagian control panel atau bagian administrator web yang telah disediakan oleh script web dinamis.

  Jadi untuk pengubahan content atau isi dokumen dalam sebuah web dinamis tidak perlu memiliki keahlian programming atau seorang programmer saja yang dapat mengubah isi dokumen pada web dinamis. Untuk membuat web dinamis diperlukan beberapa komponen yaitu client side scripting ( HTML, JavaScript, Casing Style Sheet atau CSS) dan server side scripting seperti PHP dan program basis data seperti database MySQL untuk menyimpan data – data yang ada di web dinamis.

Web Dinamis ini banyak sekali bertebaran di internet seperti Web Berita, Personal Blog, Toko Online/Web Pasng Iklan, dll.Sekian informasi sederhana saya mengenai Pengertian Web Statis dan Dinamis.

 Contoh HTML 

        Informasi di dalam WWW(Word Wide Web)menggunakan format HTML. Didalam HTML kita mengenal Hyper Text yaitu adanya link ke suatu dokumen, suatu alamat mesin bahkan ke suatu gambar, suara. Banyak software yang digunakan untuk membuat WWW dengan format HTML. Yang akan kita bahas disini adalah yang paling dasar yaitu mengunakan notepad, dimana notepad lah software yang biasanya langsung udah ada dikomputer pada saat komputer aktif, dan notepad biasanya terletak pada accesories.
Langkah pertama yang dilakukan yaitu 

Klik notepad

Simpan file dalam suatu folder dalam format nama_file.HTML%htm

Kemudian jalankan dengan Internet Explorer

Cara menjalakan 

Klik Run, cari nama file html/htm

Klik Ok

Adapun perintah perintah dasar dari HTML adalah sebagai berikut: 

1. <H1> sampai <H6>
   <H1>  </H1>font ukuran besar
   <H2>  </H2>
    ....         ....
   <H6>   </H6>font semakin kecil
2. <HR> 
   Fungsi : perintah untuk membuat garis horizontal penuh layar 
   cth :

   ---

   
   
3. <I> 
   Fungsi : membuat teks miring
4. <B> 
   Fungsi : membuat teks tebal
5. <U> 
   Fungsi : membuat teks bergaris bawah
6. <CENTER> 
   Fungsi : membuat text ke tengah layar
7. <ALIGN> 
   Fungsi : Membuat teks rata kiri dan rata kanan 
   Sintak
   <P ALIGN=right>untuk rata kanan
   <P ALIGN=left>untuk rata kiri
   <P ALIGN=center>untuk rata tengah
   <P ALIGN=justify>untuk rata kiri dan rata kanan atau
   <H?ALIGN=right>
   <H?ALIGN=left>
   <H?ALIGN=center>
   <H?ALIGN=justify>
   
   Contoh pemakaian: 
   <H2 Align=right>Selamat Datang Ke Website Kami <H2> 
8. <BR> 
   Fungsi : memasukkan fungsi enter 
   Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
9. <!-> 
   Fungsi : membuat komentar 
   Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
10. <P> 
    Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
11. <DD> 
    Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
12. <BASEFONT> 
    Fungsi : Mengubah ukuran font 
    Contoh : 
    <BASEFONT SIZE=6> 
    WELCOME TO MY WEBSITE 
    <B>WELCOME TO MY WEBSITE DAN TEBAL</B>
13. <FONT> 
    Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
14. <FACE> 
    Fungsi : mengubah jenis font
15. <SUP> 
    Fungsi : membuat cetak naik suatu teks 
    Contoh : 
    Kami adalah yang pertama:1^stin the world
16. <SUB> 
    Fungsi : membuat suatu teks cetak turun 
    Contoh : 
    contoh-contoh teks cetak turun : 
    H₂O (Disebut Air) dan 
    C₂₁27No (Disebut Methadon)
17. <UL> atau Unorder List 
    Fungsi : membuat bullet
18. <LI> 
    Fungsi : juga untuk membuat bullet 
    Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu 
    Contoh : 
    <UL> 
    <LI> 
    <H2> Jawa Timur </H2> 
    <UL> 
    <LI> SURABAYA </LI> 
    <LI> MALANG </LI> 
    <LI> GRESIK </LI> 
    </UL> 
    </LI> 
    </BR> 
    <LI> 
    <H2> Jawa Barat </H2> 
    <UL> 
    <LI> Bandung </LI> 
    <LI> Sukabumi </LI> 
    <LI> Bogor </LI> 
    </UL> 
    </LI> 
    </UL>
19. <IMGSRC> 
    Fungsi : memasukkan gambar ke dalam Website 
    Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll 
    Sintak :<IMG BORDER="5"> 
    "5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
20. <BGSOUND> 
    Fungsi : memasukkan suara atau musik ke dalam Website 
    Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">
Link dengan sorot
Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse. 
<HTML> 
<HEAD> 
<TITLE> </TITLE> 
<META Name="description"Content=" "> 
<META Name="keywords"Content=" "> 
<META Name="generator"Content="Cute HTML"> 
</HEAD> 
<BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080"> 
<Center> 
<A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):"> 
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e> 
</CENTER> 
</BODY> 
</HTML> 
Link dengan tombol
Berikut adalah contoh program link dengan tombol 
Sintak : 
<Input type="button"Value="Nama Tombol" 
On Click="parent.location="Link anda disini" > 
Contoh 
Buatlah link dengan nama 
tentang_kami.html 
produk_kami.html 
cara_memesan.html 

< HTML > 
< HEAD > 
< TITLE > </TITLE> 
< META name="description"Content=" "> 
< META name="keywords"Content=" "> 
< META name="generator"Content="Cute HTML"> 
< /HEAD > 
< BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" > 
< Center > 
< h1 > PT.OCTA > 
< Input Type="button"value="Tentang Kami" 
on click="parent.location="c:/website/tentang_kami.html'" > 
< Input Type="button"value="Produk Kami" 
on click="parent.location="c:/gambar/produk_kami.html'" > 
< Input Type="button"value="cara memesan" 
on click="parent.location="c:/gambar/cara_memesan.html'" > 
< /Center > 
< /Body > 
< /HTML > 
Kolom
< tr > adalah perintah untuk membuat kolom pada notepad
Berikut adalah contoh perintah cara membuat kolom pada notepad 
< html > 
< head > 
< title > Belajar membuat kolom < /title > 
< /head > 
< H3 Align="Center" > DAFTAR MAHASISWA < H3 > 
< table border="3" border color="red" 
< tr > 
< td > No 
< td > Nama 
< td > Alamat 
< td > No. Phone 
< td > Gambar 
< /tr > 
< tr > 
< td > 1 
< td > Octa 
< td > Padang Bulan 
< td > 8214773 
< td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >

Hasilnya menjadi
Membuat Frame

-Framecols : membagi layar dalam bentuk kolom 
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols="30%,*")
(Frame Src="Nama.file Name="Teks")
(Frame Rows="40%,*")
(Frame Src="Nama.file"Nama="teks")
(Frame Src="Nama.file"Nama="Teks)
(/Frameset) 
Contoh Program Frame 
< Html >
< Head >
< Title >Melink dengan sorot < /Title >
< /Head >
< Frameset cols="30%,*" >
< Frame Src="Nama file"Nama="Teks" >
< Frame Rows="40%%,*" >
< Frame Src="Gambar File’Nama="Gambar" >
< Frame Src="Nama File"Nama="Teks >
< /Frameset

Cara Membuat Web Dinamis Sederhana(Input, Edit dan Delete) Bagian 3

data barang

 Kali ini saya akan memberikan langkah-langkah dan kode untuk membuat perintah Input, Edit dan Delete data pada tabel..

1.  Pertama-tama seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di URL Browser : localhost/phpmyadmin maka muncul laman phpmyadmin, jika anda mengikuti tutorial sebelumnya buka database dengan nama db_web, jika belum ada anda bisa membuat databasenya, lalu buat table data untuk menyimpan data yang akan kita kelola, ketikkan kode SQL di bawah ini:

create table barang (
kode char(10) not null primary key,
namabarang varchar(50) not null,
harga bigint
)

2.   Selanjutnya kita akan membuat koneksi ke databasenya, 
buat folder di dalam htdocs dan beri nama barang lalu buka notepad (disarankan notepad ++) lalu ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama koneksi.php:

<?php  
$server= "localhost";  
$username = "root";   
$password = "";   
$database = "db_web";  
  
mysql_connect($server,$username,$password) or die ("Koneksi Gagal");  
  
mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );  
  
?> 

3.   Selanjutnya kita akan membuat form input barang, ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama formbarang.php:

<html><head>
<title>Input Data Barang</title>
</head><body>
<h2>Data Barang</h2>
<form action="savebarang.php" method="POST">
<table><tr>
<td>Kode Barang</td>
<td>: <input type="text" name="kode" size="10"></td>
</tr>
<tr>
<td>Nama Barang</td>
<td>: <input type="text" name="namabarang" size="30"></td>
</tr>
<tr>
<td>Harga Satuan</td>
<td>: <input type="text" name="harga" size="20"></td>
</tr>
<tr>
<td colspan=2><input type="submit" value="Kirim"></td>
</tr></table></form>
</body></html>

Kode diatas adalah jika kita klik tombol Kirim maka akan langsung memproses file savebarang.php maka dari itu selanjutnya kita akan membuat file savebarang.php

4.  Kemudian kita akan membuat kode untuk menyimpan data kedalam mysql, ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama savebarang.php:: 

<?php ob_start();
include "koneksi.php";

$kode   = $_POST['kode'];
$nama   = $_POST['namabarang'];
$harga  = $_POST['harga'];

mysql_query("INSERT INTO barang(kode,namabarang,harga)
VALUE('$kode','$nama','$harga')")or die(mysql_error());
header('location:tampilbarang.php');
?>

 5.  Selanjutnya kita akan membuat tabel untuk menampilkan data yang telah kita input. Ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama tampilbarang.php: 

<?php
include "koneksi.php";
include "formbarang.php";
echo "<center><table border=1><tr bgcolor=orange>
<td><b><center>No</td>
<td><b><center>Kode Barang</td>
<td><b><center>Nama Barang</td>
<td><b><center>Harga Satuan</td>
<td><b><center>Delete</td>
<td><b><center>Edit</td>
</tr>";
$query=mysql_query("SELECT * FROM barang ORDER BY kode");
$no=1;
while($var=mysql_fetch_array($query)){
echo "<tr>
<td>$no</td>
<td>$var[kode]</td>
<td>$var[namabarang]</td>
<td>$var[harga]</td>
<td><center><a href='deletebarang.php?kode=$var[kode]'>Delete</a></td>
<td><center><a href='formeditbarang.php?kode=$var[kode]'>Edit</a></center></td>
</tr>";
$no++;
}
echo "</table><br><b>Data Barang by banuaril10.blogspot.com</b>";
?>

6.  Selanjutnya kita akan membuat perintah delete, ketikkan kode di bawah ini Ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama deletebarang.php:

<?php ob_start();
include "koneksi.php";
mysql_query("delete from barang where kode='$_GET[kode]'");
header('location:tampilbarang.php');

?>

7.  Selanjutnya kita akan membuat perintah edit barang, ketikkan kode di bawah ini Ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama formeditbarang.php :

<?php 
include "koneksi.php";
$kode=$_GET['kode'];
$query=mysql_query("select * from barang where kode='$kode'");
?>
<html><head><title>Halaman Edit Data Barang</title><head><body>
<form action="editbarang.php" method="post">
<table border="0">
<?php
while($row=mysql_fetch_array($query)){
?>
<input type="Hidden" name="no" value="<?php echo $no;?>" />
<h2>Data Barang</h2>
<table><tr>
<td>Kode Barang</td>
<td>: <input type="text" name="kode" value="<?php echo $row['kode'];?>" size="10"></td>
</tr>
<tr>
<td>Nama Barang</td>
<td>: <input type="text" name="namabarang" value="<?php echo $row['namabarang'];?>"size="30"></td>
</tr>
<tr>
<td>Harga Satuan</td>
<td>: <input type="text" name="harga" value="<?php echo $row['harga'];?>"size="20"></td>
</tr>
<tr>
<td colspan=2><input type="submit" value="Update"></td>
</tr>
<?php } ?>
</table></form>

</body></html>

Fungsi kode ini adalah untuk menampilkan data yang kita klik ke dalam form yang akan kita edit nanti

value="<?php echo $row['kode'];?>

 8.  edit barang dan akan menggantikan dengan data yang baru, ketikkan kode di bawah ini dan Simpan di folder htdocs/barang dengan nama editbarang.php :

<?php ob_start();
include "koneksi.php";
$kode    = $_POST['kode'];
$nama          = $_POST['namabarang'];
$harga         = $_POST['harga'];

$query=mysql_query("update barang set kode='$kode', namabarang='$nama', harga='$harga' where kode='$kode'");
header('location:tampilan)