05.41

Upload Data denganPHP

Diposting oleh berbagi ilmu | Label:

kali ini kita akan belajar bagaimana mengupload data menggunakan php. Pada tutorial kali ini, kita memberikan filtrasi/validasi tipe file yang bisa di upload dan ukuran file yang di upload. Secara lebih rinci, berikut aturannya.
1. Hanya mengizinkan file dengan type pdf atau zip
2. Data maksimum yang dapat di upload adalah 1 MB

Untuk source code upload tidak saya bahas lebih dalam, yang akan dibahas adalah bagaimana membuat penyaringan/validasi file yang di upload.

Fungsi untuk menyaring, tipe file yang di upload :

if($info['extension'] == 'pdf' || $info['extension'] == 'zip' ){
    echo'tipe file pdf atau zip';
    } else{
    exit('maaf tidak bisa upload karena file bukan pdf atau zip');
    }

Sedangkan fungsi untuk membatasi ukuran file

if(filesize($file)>1000000){
    echo 'ukuran file'.filesize($file).'<br />';
    exit('file terlalu besar ukuran file maksimum 1 MB');
    }
:
angka 1000000 menandakan batasan file yang di upload dalam byte.

Berikut ini kode program lengkapnya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Upload File</title>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>"
method="post" enctype="multipart/form-data">
    File:<input type="file" name="fl" />
    <input type="submit" name="submit" value="Upload"/>
</form>
<?php
if (isset($_POST['submit'])
&& isset($_FILES['fl'])){
    //lokasi pada direktori upload
    $dir='./upload/';
    $file = $_FILES['fl']['tmp_name'];
    $name = $_FILES['fl']['name'];
    $info = pathinfo($name);
    //memastikan file tdk kosong
    if(!is_uploaded_file($file)){
        exit('No file selected..');
    }
    //menetapkan data maksimu file yang di upload
    if(filesize($file)>1000000){
    echo 'ukuran file'.filesize($file).'<br />';
    exit('file terlalu besar ukuran file maksimum 1 MB');
    }   
    //menetapkan tipe file
    if($info['extension'] == 'pdf' || $info['extension'] == 'zip' ){
    echo'tipe file pdf atau zip';
    } else{
    exit('maaf tidak bisa upload karena file bukan pdf atau zip');
    }
    if(!move_uploaded_file($file, $dir.$name)){
        echo 'Unable to upload file';
    }else {
        echo'FIle uploaded..';
    }
}
?>
</body>
</html>

Simpan kode program dalam filetype .php

Berikut tampilan programnya
image

komentar (0)

04.28

Membuat Form LOgin

Diposting oleh berbagi ilmu | Label:

Pada latihan berikut ini, kita akan membuat sebuah form login username dan password dengan validasi masukan awal disisi client menggunakan javascript dan validasi disisi server menggunakan php.

Aturannya adalah:

  1. Field username dan password tidak boleh kosong, username dan password harus berupa huruf bukan angka
  2. Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke field pertama (id).
  3. Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai field adalah string.
  4. Jika nilai id dan password sesuai dengan pre-defined value di variabel, munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan.
Langkah awal, adalah membuat validasi sisi client dengan memanfaatkan regular expression pada java script. Aturannya adalah, masukan harus berupa huruf. Maka pola regexnya adalah

re = /^\D{3,}$/;
\D   berarti masukan harus huruf/bukan angka
{3,} berarti masukan minimal 3 karakter boleh lebih

Langkah selanjutnya adalah kita buat fungsi untuk memvalidasi formnya….

function checkUserName(v) {
    re = /^\D{3,}$/;
    return re.test(v);
}
function checkPass(v) {
    re = /^\D{3,}$/;
    return re.test(v);
}
function checkForm(f) {
    if (!checkUserName(f.username.value)) {
        alert("Please enter a valid username!");
        f.username.focus();
        return false;
    }
    if (!checkPass(f.password.value)) {
        alert("Please enter a valid PIN!");
        f.pin.focus();
        return false;
    }
    return true;
}
Setelah validasi disisi client beres… kita mengatur validasi disisi server dan juga mengatur username dan password yang benar…
Berikut sintaks phpnya …
<?php
if (isset($_POST['Login'])){
    $user = $_POST['username'];
    $pass = $_POST['password'];
    if($user == "azhar" && $pass == "ahmad") {
        echo"<h2>Login berhasil.... \n id anda = $user</h2>";
    } else {
        echo"<h2>Login gagal</h2>";
    }
}
?>

simpan sintaks php dengan nama login.php

Sekarang kita buat kode htmlnya…
Berikut ini kode html secara lengkap
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Validasi Login</title>
<link rel="stylesheet" href="login.css" type="text/css"/>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function checkUserName(v) {
    re = /^\D{3,}$/;
    return re.test(v);
}
function checkPass(v) {
    re = /^\D{3,}$/;
    return re.test(v);
}
function checkForm(f) {
    if (!checkUserName(f.username.value)) {
        alert("Please enter a valid username!");
        f.username.focus();
        return false;
    }
    if (!checkPass(f.password.value)) {
        alert("Please enter a valid PIN!");
        f.pin.focus();
        return false;
    }
    return true;
}
</script>
<div id="form">
<h2 align="center">Login</h2>
<hr style="color:#3ebee9; border:double;" align="center" width="300"/>
<form action="login.php" method="POST" NAME="input" onSubmit="return checkForm(this)">
   <div id="Input">
   Username:<br />     <input type="text" name="username"/><br />
   Password:<br />     <input type="password" name="password"/><br />
   </div>
   <div id="btnLogin">
   <input type="submit" name="Login" value="Login">
    </div>
</form>
</div>
</body>
</html>

Simpan kode html tersebut dengan nama Login.html
Agar tampilan lebih indah, kita buat kode cssnya. Berikut ini kode cssnya…
#form{
margin-top:180px;
margin-left:450px;
font-family: arial;
font-size: 20px;
color:#3ebee9;
width:350px;
height : 250px;
background: #eef7ff;
border: 3px solid #9fd5f4;
}
#btnLogin{
margin-left:100px;
}
#Input{
margin-top: 30px ;
margin-left: 100px ;
margin-bottom: 10px;
font-family: calibri;
font-size: 15px;
color:#666666;
}

Simpan kode css tersebut dengan nama login.css
Ingat, semua kode tersebut harus disimpan dalam direktori yang sama.
Berikut ini tampilan form login

komentar (0)

Diposting oleh berbagi ilmu | Label:

Fungsi BuatTabel memiliki 2 argumen yang berisi variabel baris dan kolom.
perulangan pertama untuk membuat baris, perulangan kedua untuk membuat kolom . Perulangan for seperti ini disebut “nested for”.
Setelah kita membuat fungsi BuatTable, langkah selanjutanya adalah memanggil fungsi tersebut dan mengisikan argumen fungsi sesuai dengan keinginan kita. Misalkan kita ingin membuat tabel 5 baris dan enam kolom. Maka sintaks untuk pemanggilan fungsinya adalah : “BuatTabel(5,6);”Sintaks fungsi secara lengkap :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<title>Generate Table</title>
</head>
<body>
<?php

function BuatTabel($baris, $kolom)
{
print("<h2 align=\"center\">Tabel $baris baris dan $kolom kolom</h2>");
print("<table align=\"center\" width = \"80%\" border=\"1\">\n");

for($b = 0; $b < $baris; $b++) {
print("<tr>\n");
for($k = 0; $k < $kolom; $k++) {
print("<td height=\"30\" width=\"10%\"></td>\n");
}
print("</tr>\n");
}
print("</table>\n");
}
BuatTabel(6,5); //memanggil fungsi BuatTabel
?>
</body>
</html>

Tampilan untuk sintaks di atas adalah sebagai berikut:

komentar (0)

23.06

membuat form pemesanan makanan

Diposting oleh berbagi ilmu | Label:

Dynamic HTML(DHTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengkombinasi elemen-elemen seperti HTML, style sheet, dan scripting. Jadi DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekedar istilah saja. Pada bagian ini, pembuatan DHTML akan dilakukan dengan pemanfaatatn JavaScript. Berikut adalah contoh pengaplikasian DHTML dengan JavaScript dalam pembuatan daftar harga makanan.

b
Berikut adalah script untuk membuat aplikasi seperti di atas

<html>
<head>
<title>Waroeng makan</title>
</head>
<center><h1><font color="blue" face="monotype corsiva">Pilihan Makanan dan Minuman</font></h1></center>
<table border="0" cellpadding="2">
    <tr>
        <td align="center" colspan="2" width="15%" bgcolor="green">
<font color="#FFFFFF"><strong>Menu</strong></font></td>
        <td align="center" colspan="3" bgcolor="green">
<font color="#FFFFFF"><strong>pilihan menu</strong></font></td>
        <td align="center" bgcolor="green">
<font color="#FFFFFF"><strong>Total</strong></font></td>
</font>    </tr>
    <tr>
<form>
        <td colspan="2" width="15%" bgcolor="purple"><font color="yellow">Makanan : </font></td>
        <td width="25%" bgcolor="red"><input type="radio"
        name="Bakso Spesial" value="Bakso Spesial" onClick="form.Makanan_value.value= 12000">
<strong>Bakso Spesial</strong> <br><font size="2">Rp 12,000</font></td>

        <td width="25%" bgcolor="red"><input type="radio"
        name="Pangsit Spesial" value="Pangsit" onClick="form.Makanan_value.value= 11000">
<strong>Pangsit Spesial</strong> <br><font size="2">Rp 11,000 </font></td>

        <td width="25%" bgcolor="red"><input type="radio"
        name="Soto Babat" value="Soto Babat" onClick="form.Makanan_value.value= 9000">
<strong>Soto Babat</strong> <font size="2"><br>Rp 9,000 </font></td>

        <td width="15%" bgcolor="red"><input type="text" size="13" 
name="Makanan_value" value="0"> </td>
</form>
    </tr>
    <tr>
<form>
        <td colspan="2" width="15%" bgcolor="purple"><font color="yellow">Minuman : </font></td>
        <td width="15%" bgcolor="Blue">
            <p><input type="radio" checked name="BAkso Spesial" value="Jus Apukat" 
   onclick="form.Minuman_value.value= 6000"><strong><font color="orange">Jus Apukat</font></strong>
            <font color="red" size="2">Rp 6,000</font></p></td>
        <td width="15%" bgcolor="blue">
            <p><input type="radio" name="Bakso Spesial" value="softdrink" 
   onclick="form.Minuman_value.value= 4000"><strong><font color="orange">softdrink</font></strong>
            <br><font color="red" size="2">Rp 4,000</font></p>        </td>
        <td width="15%" bgcolor="blue">
            <p><input type="radio" name="Bakso Spesial" value="Es Dawet"
   onclick="form.Minuman_value.value= 3000"><strong><font color="orange">Es Dawet</font></strong>
            <font color="red" size="2"><br>Rp 3,000 </font></p>        </td>
        <td width="15%" bgcolor="blue"><input type="text" size="13" 
name="Minuman_value" value="0"> </td>
        </form>
    </tr>
    <tr>
<form>
        <td colspan="2" width="15%" bgcolor="purple"><font color="yellow"> Makanan Ringan : </font></td>
        <td width="15%" bgcolor="yellow">
<input type="radio" name="Bakso Spesial" value="Bakwan"
        onclick="form.camilan_value.value= 500"><strong><font color="red">Bakwan</font></strong>
        <br><font size="2">Rp 500</font></td>

        <td width="15%" bgcolor="yellow">
<input type="radio" name="Bakso Spesial" value="pisang goreng"
        onclick="form.camilan_value.value= 600"><strong><font color="red">pisang goreng</font></strong>
        <br><font size="2">Rp 600</font></td>

        <td width="15%" bgcolor="yellow"><font color="">
<input type="radio" name="Bakso Spesial" value="Tempe Menjes"
        onclick="form.camilan_value.value= 500"><strong><font color="red">Tempe menjes </font></strong></font>
<br><font size="2">Rp 500</font></td>

        <td width="15%" bgcolor="yellow"><font color=""><input
        type="text" size="13" name="camilan_value" value="0"> </font></td>
</form>
    </tr>
    <tr>
<td colspan="4"></td>
<form>
<td colspan="1" valign="top" align="center" bgcolor="purple">
<input type=button value="Total Harga" name="total" onClick='
var total=eval(parseInt(document.forms[0].Makanan_value.value) + parseInt(document.forms[1].Minuman_value.value) + parseInt(document.forms[2].camilan_value.value));
var diskon=5000;
form.total_value.value="Rp " + total;
if(total>20000)
{
totDis=eval(total- diskon);form.diskon.value="Rp "+diskon;
} 
else 
{
totDis=total;form.diskon.value=0;
}
form.total_diskon.value="Rp " + totDis;
'>
</td>
<td bgcolor="purple">
<label><font color="yellow"><b>TOTAL HARGA</b></font></label>
<input type="text" size=12 name="total_value">
<label><font color="yellow"><b>DISKON</b></font></label>
<input type="text" name="diskon" size=12 > 
   
<label><font color="yellow"><b>jumlah dibayar</b></font></label>
<input type="text" size=12 name="total_diskon">    
</td>
</form>
    </tr>
    
</table>

</body>
</html>



komentar (0)

14.23

Membuat Desain web dengan CSS

Diposting oleh berbagi ilmu | Label:

Dalam membuat desain web, hal yang tidak boleh terlewatkan adalah membuat kerangka dasar desain. Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang digunakan untuk menampung keseluruhan desain. Setelah mempersiapkan wrapper, langkah selanjutnya adalah mempersiapkan layout. Berikut ini adalah contoh layout web yang terdiri dari header, menu content, dan footer dengan desain terpisah.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <title>Studi CSS-1</title>

  <link type="text/css" rel="stylesheet" href="layout.css" />

</head>

<body>

<div id="wrapper">

  <div id="header">

    Header

  </div>

  <div id="inner">

    <div id="sidebar">

      sidebar

    </div>

    <div id="content">

      <div id="content-top">

        Top Content

      </div>

      <div id="content-main">

        Main Content

      </div>

      <div id="content-right">

        Right Content

      </div>

    </div>

  </div>

  <div id="footer">

  Footer

  </div>

</div>

</body>
</html>

Langkah selanjutnya adalah simpan source code di atas dengan file name *.css, lalu tuliskan source kode berikut untuk ditautkan dengan source kode yang dibuat di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

  <title>Studi CSS-2</title>

  <link type="text/css" rel="stylesheet" href="3_2.css" />

</head>



<body>

<div id="wrapper">

  <div id="header">

      <div id="header-content">

        <div id="menu-top">

        Home | Sitemap | RSS | Contact | About Us

        </div>

        <div id="logo">

            <img src="UM3D.png" width="50"alt=""/>

        </div>

        <div id="site-title">

            <h2>TEKNIK ELEKTRO</h2>

        </div>

        <div id="search">

            Search : <input name="q" size="20" type="text"/>

        </div>

    </div>

  </div>

 

  <div id="inner">

    <div id="sidebar">

      <div id="leftmenu">

        <ul>

          <li><a href="#">Home</a></li>

          <li><a href="#">News and Media</a></li>

          <li><a href="#">Tutorials</a></li>

          <li><a href="#">Tips and Tricks</a></li>

          <li><a href="#">Download</a></li>

        </ul>

      </div>

    </div>

    <div id="content">

      <div id="content-top">



      </div>

      <div id="content-main">

        <h3>Presentasi dari TecQuipment Ltd, UK</h3>

        <hr />

        <p class="style1">

        Rabu, 3 Maret 2010

        </p>

        Voice over Internet Protocol (VoIP), atau dengan nama lainnya Internet Telephony adalah suatu teknologi untuk mentransmisikan data termasuk yang berupa data biasa, suara ataupun video secara real time melalui internet (saluran IP). Dalam aplikasi transmisi suara, VoIP merupakan kandidat kuat untuk menggantikan jaringan telepon konvensional yang menggunakan PaBX (Privat Branch Exchange). Hal ini dikarenakan biayanya yang lebih murah terutama untuk koneksi interlokal dan internasional (jarak jauh). Apalagi sekarang dikatakan bahwa kualitas dari layanan VoIP ini dapat melebihi kualitas layanan jaringan konvensional.
      </div>

      <div id="content-right">

        <h3>Events</h3>

            <ul>

                <li><a href="#">Lomba Fotografi</a></li>

                <li><a href="#">Pelantikan KORPS ASISTEN</a></li>

                <li><a href="#">Lomba Desain Grafis</a></li>

                <li><a href="#">Seminar Nasional</a></li>

            </ul>

        </div>

      </div>

  </div>

  <div id="footer">

  <br />

  <p><b>&#169; 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>

  </div> 

</div>
</body></html>

Hasil tampilannya adalah sebagai berikut:

komentar (0)

13.21

Desain Tabel Pengelompokan

Diposting oleh berbagi ilmu | Label:

Dengan memanfaatkan fitur pengelompokan, desain web dapat digunakan untuk membuat tabel pengelompokan sebagai berikut:

Dan source kodenya adalah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>
<table width="470" height="401" border="0">
  <tr>
    <td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"3">PERBANDINGAN FITUR</font></td>
  </tr>
  <tr>
    <td width="31"align="center">No</td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="208" align="center">Fitur</td>
    <td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"></td>
    <td width="92" align="center">Enterprise</td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="0"align="center">Pro</td>
    <td width="0"align="center">Free</td>
  </tr>
      <tr>
    <td colspan="8" style="border-top:#000000 solid thin;"></td>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Garansi seumur hidup </td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td>Multiuser</td>
    <td align="center">X</td>
    <td align="center">-</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td>Update otomatis </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td>Cetak Laporan </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td>Notifikasi error </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
  </tr>
  <tr>
    <td colspan="8" style="border-top:#000000 solid thin;"></td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td>Ubah tema </td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td>Try ikon</td>
    <td align="center">X</td>
    <td align="center">X</td>
    <td align="center">X</td>
  </tr>
    <tr>
    <td colspan="8" style="border-top:#000000 solid thin;"></td>
  </tr>
</table>
</body>
</html>

komentar (0)

12.11

Membuat Kreasi Grafik dengan Elemen Tabel

Diposting oleh berbagi ilmu | Label:

Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Pada pemrograman web dengan HTML, elemen-elemen yang digunakan untuk membuat dabel dapat dikreasikan untuk membuat suatu grafik berupa diagram batang. Berikut adalah contoh pengapikasiannya:

Berikut adalah listing programnya:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Grafik Berbasis tabel</title>
</head>
<body>
<p>
<font color="Black" face="Times New Romans" size="5">Membuat grafik berbasis tabel 1</font>
</p>

<table width="600" >
<tr>
<td colspan="20" style="border-top:#000000 solid;border-bottom:#000000 solid;">
<table rules="rows" align="left" cellspacing="1" cellpadding="7">
<tr><!-- Mengatur lebar kolom -->
<th width="230">PERUSAHAAN</th>
<th width="566">PENDAPATAN</th>
</tr>
</table>
</td>
</tr>

  <tr >
    <!--&nbsp;-->
    <td width="172" >Angin Reebot Ltd </td>
    <td width="27"></td>
    <td width="31"></td>
    <td width="25"></td>
    <td width="33"></td>
    <td width="16"></td>
    <td width="13"></td>
    <td colspan="6" bgcolor="#006600"style="border:#000000 solid"></td>
    <td width="17">+150%</td>
  </tr>

  <tr>
    <td>Command Prompt, Inc </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="4" bgcolor="#006600"style="border:#000000 solid"></td>
    <td width="16">+55%</td>
    <td width="16"></td>
    <td></td>
  </tr>

  <tr>
    <td>Hibernate Ltd </td>
    <td></td>
    <td></td>
    <td></td>
    <td>-23%</td>
    <td colspan="2" bgcolor="#FFFF00"style="border:#000000 solid"></td>
    <td width="34"></td>
    <td width="16"></td>
    <td width="16"></td>
    <td width="16"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>Shutdown Ltd </td>
    <td></td>
    <td>-75%</td>
    <td colspan="4" bgcolor="#FF0000"style="border:#000000 solid"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td colspan="14" style="border-top:#000000 solid"></td>
  </tr>
</table>

</body>
</html>




komentar (0)

Langganan: Postingan (Atom)
Subscribe