RSS

Pembahasan studi kasus tentang Jam PHP dan upload kombinasi html dengan PHP?

Gimana hasilnya? Lulus? sudah dicoba belum tentang studi kasus diposting sebelumnya? Jika belum saya saranin untuk membaca n mempraktekan dulu deh… ūüôā sebelum kesini… ni hasil studi kasusnya

Apa yang dimaksud dengan ‚Äúl jS \of F Y h:i:s A‚ÄĚ ?

l              : menampilkan nama hari dalam minggu secara tekstual misalnya  Sunday, Saturday    dan lain-lain.

j              :  menampilkan tanggal

S             : menampilkan th(singkatan untuk menyatakan urutan ke)

\of          :  menampilkan of

F             :  menampilkan nama bulan dalam bahasa Inggris

Y            :  menampilkan tahun secara lengkap empat digit (misal 2011)

H            :  menampilkan jam

I             :  menampilkan menit

S             :  menampilkan detik

A            :  menampilkan AM atau PM

Hasil dalam browser

Upload file dengan melakukan filter terhadap file *.jpg dan *.png serta file tidak boleh lebih dari 1 MB.

Jawab:

Program terdiri dari dua file dengan nama ‚ÄúTgsUpload.html‚ÄĚ dan ‚ÄúTgsUpload.php‚ÄĚ. ‚ÄúTgsUpload.html‚ÄĚ digunakan untuk menampilkan interface file upload sedangkan ‚ÄúTgsUpload.php‚ÄĚ berisi perintah-perintah upload file dan menampilkan file dalam web browser.

Script ‚ÄúTgsUpload.html‚ÄĚ

<html>

  <body>

¬†¬†¬†¬†¬†¬† <h1 align=”center”>Upload File Gambar</h1>

¬†¬†¬†¬†¬†¬† <table align=”center”>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <form action=”TgsUpload.php” method=”POST”

¬†¬†¬†¬†¬†¬†¬†¬† enctype=”multipart/form-data”>

            <tr>

                 <td>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <label for=”file”>Upload

                      Gambar</label>

                 </td>

                 <td>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <input type=”file” name=”file”

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† id=”file” />¬†

                 </td>                  

            </tr>

            <tr>

                 <td>&nbsp;

                 </td>

                 <td>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <input type = “submit” Name =

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† “tampilkan” ¬†value=”Tampilkan” />

                 </td>                  

            </tr>

       </form>

       </table>     

  </body>

</html>

Script ‚ÄúTgsUpload.php‚ÄĚ

<?php

  /*

       file      : TgsUpload.php

       Deskripsi : Program untuk pemrosesan upload file

  */

¬† $fileAsli¬†¬†¬†¬† =$_FILES[“file”][“name”];

¬† $fileType¬†¬†¬†¬† =$_FILES[“file”][“type”];

¬† $fileSize¬†¬†¬†¬† =$_FILES[“file”][“size”];

¬† $fileTemp¬†¬†¬†¬† =$_FILES[“file”][“tmp_name”];

¬† $fileEror¬†¬†¬†¬† =$_FILES[“file”][“error”];

  if ($fileEror>0)

       {

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo “return code: “.$fileEror.”<br>”;

       }

¬† else if ($fileType==”image/pjpeg” or $fileType ==”

¬†¬†¬†¬†¬†¬†¬† image/x-png”)

       {   

//untuk melakukan filter terhadap file yang lebih dari 1MB

       if ($fileSize<=1000000)

            {

         $pindah = move_uploaded_file ($fileTemp , 

¬†¬†¬†¬†¬†¬†¬†¬† “upload/”.$fileAsli);

            if($pindah)

            {

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<h2 align=center>sukses upload file

¬†¬†¬†¬†¬†¬†¬†¬†¬† gambar</h2>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<table border=1 align=center>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<tr>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<td rowspan=2>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<img src=upload/$fileAsli width=130

¬†¬†¬†¬†¬†¬†¬†¬†¬† height=195>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</td>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<td><pre>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”nama : “.$fileAsli.”<br>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”type : “.$fileType.”<br>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”ukuran¬†¬† : ¬†“.$fileSize. “&nbsp;byte

¬†¬†¬†¬†¬†¬†¬†¬† <br> “;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”temp ¬†¬†¬† :”.$fileTemp.”<br>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</pre></td>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</tr>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<tr>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<td>”;

$dir=”upload/”;//melist file-file yang ada

          pada folder upload

            if (is_dir($dir))

            {

            if ($dh = opendir($dir))

            {

            while(($file=readdir($dh))!== false)

            {

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”nama file : $file :type file

¬†¬†¬†¬†¬†¬†¬†¬† :”.filetype($dir.$file).”<br>”;

            }

            closedir($dh);

            }}

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</td>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</tr>”;

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”</table>”;

            }}

            else{

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<h1>file tidak boleh lebih dari 1 MB

¬†¬†¬†¬†¬†¬†¬†¬† </h1>”;

            }}

            else{

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† echo”<h1>Selain type *.jpg dan *.png tidak

¬†¬†¬†¬†¬†¬†¬†¬† dapat diupload</h1>”;

            }

?>



nah seperti itu kurang lebih hasilnya, semoga bermanfaat.. temen-temen bisa mengembangkan lagi dengan yang lebih mantabbbbb
Advertisements
 
Leave a comment

Posted by on October 7, 2011 in PHP

 

Tags: , , ,

Studi Kasus Jam PHP dan Upload kombinasi HTML dengan PHP

Gimana tentang Posting sebelumnya? sudah mencoba? posting sebelum ini?gmn udah paham belum…. nah posting yang kemarin itu dasar-dasar tentang php. Itu bisa menjadi pengetahuan dasar bagi programmer-programmer yang udah handal sekalipun… emang masih sangat gampang.. iya kan? atau ada yang merasa kesulitan dengan sintak-sintak diposting itu… kayaknya tidak ada ya… kalau mau bingung nanti aja diposting posting yang selanjutnya… hehe… tapi pas waktu itu datang pastinya sudah menjadi handal lagi hehe.. :). nah sebelum dibahas ilmu baru mengenai PHP, uji kepahaman dulu ni.. bertolak pada ilmu-ilmu yang telah diposting sebelumhya… Koq kaya kuliah aja ada ujian atau studi kasus…. nah emah gito… dibuat semirip mungkin dengan ujian biar temen-temen yang belum sempat kekampus bisa kesini hehe… tapi tenang aja ga usah takut tidak lulus karna dosennya adalah temen-temen sendiri.. hehe… bahkan melalui koneksi ini teman-teman bisa jauh melampuai yang menulis ini dan anak-anak kuliah lainnya?

  • Apa yang dimaksud dengan ‚Äúl jS \of F Y h:i:s A‚ÄĚ ?
  • Anda diminta untuk membuat program PHP untuk meng-upload file. Namun yang boleh di-upload hanya file gambar dengan ekstensi *.JPG dan *.PNG dengan ukuran kurang dari 1MB. Setelah diupload, file gambar tersebut harus bisa ditampilkan (melalui program PHP juga). Buatlah program tersebut !

Petunjuk : pelajari makna masing-masing baris pada upload_file.php di atas, gunakan salah satu fungsi-fungsi yang bersesuaian untuk membuat program diatas! Anda juga harus mampu me-list file dalam direktori tempat tujuan upload me-list file gambar dan menampilkannya dalam format HTML!

SELAMAT MENCOBA…

 
Leave a comment

Posted by on October 7, 2011 in Belajar web, PHP

 

Tags: , , , , ,

Dasar-dasar PHP

Fungsi Dasar PHP

Tujuan

Setelah praktikum ini diharapkan mahasiswa mampu menggunakan fungsi : array, calendar, date,directory, http, operasi string, serta file upload. Selain itu, dalam praktikum ini mahasiswa

diperkenalkan juga PHP manual.

Tools

Praktikum ini menggunakan tools : Apache web server dan PHP, text editor

Langkah-langkah praktikum

Praktikum 1 : array

Array merupakan sekumpulan data dengan tipe yang sama. Dalam PHP, penggunaan array bisa

melalui fungsi array() :

<?

/*

File : array_dasar.php

Deskripsi : dasar pembuatan dan operasi array

*/

//dasar membuat dan operasi array

$numbers = array(1,2,3,4);

print_r($numbers);

print(“<br>”);

print(“total array element : “.count($numbers));

print(“<br>”);

print(“element number 1 : “.$numbers[0]);

//array dengan index yang didefinisikan sendiri

$array = array(1, 1, 1, 1, 1, 8 => 1, 4 => 1, 19, 3 => 13);

print(“<br>”);

print_r($array);//amati susunan elemennya!!!

print(“<br>”);

$first_three_months = array(‘jan’=>’january’,’feb’=>’february’,’mar’=>’march’);

print(“jan is “.$first_three_months[‘jan’]);

/*

****** LATIHAN : tampilkan elemen array,dari array manapun diatas,

dengan for dan foreach !!! *****

*/

?>

Praktikum 2 : calendar dan date

PHP dapat menangani beberapa tipe kalender seperti Gregorian, Julian, Jewish, dsb. Selain itu, ada

fungsi dalam PHP untuk menampilkan tanggal dengan format tertentu.

<?

Praktikum 2 : calendar dan date

PHP dapat menangani beberapa tipe kalender seperti Gregorian, Julian, Jewish, dsb. Selain itu, ada

fungsi dalam PHP untuk menampilkan tanggal dengan format tertentu.


<?php

/*

File : caldate_demo.php

Deskripsi : program untuk mengenalkan fungsi tanggal di PHP

*/

//menampilkan tipe kalender tertentu

$info = cal_info(0); //0 : kalender gregorian

print_r($info);

print(“<br>”);print(“<br>”);

//menampilkan jumlah hari dalam bulan dan tahun tertentu

$num = cal_days_in_month(CAL_GREGORIAN, 2, 2010); // 31

print(“There was $num days in February 2010”);

print(“<br>”);print(“<br>”);

// menampilkan tanggal dan jam hari ini dalam format tertentu

$now = date(‘l jS \of F Y h:i:s A’);

print(“today is “.$now);

?>

Apa yang dimaksud dengan ‚Äúl jS \of F Y h:i:s A‚ÄĚ ?


Praktikum 3 : operasi file dan direktori

Buatlah file teks ‘welcome.txt’

Hello students!,

welcome to Internet Programming Labs

now, we will learn file and directory operation

enjoy!

Program berikut berlokasi sejajar dengan file welcome.txt :

<?

/*

File : read_file.php

Deskripsi : program untuk membaca file

*/

//membaca file yang direpresentasikan dalam bentuk array!

$array_of_text = file(“welcome.txt”);

print_r($array_of_text);

print(“<br>”);

/***

LATIHAN : Tampilkan seluruh isi file menggunakan array!

***/

?>

Program berikut akan menunjukkan operasi direktori

<?

/*

File : list_dir.php

Deskripsi : program untuk me-list isi dari direktori

*/

$dir = “./”; //direktori yang sejajar dengan list_dir.php

if (is_dir($dir)) {

if ($dh = opendir($dir)) {

while (($file = readdir($dh)) !== false) {

echo “filename: $file : filetype: ” . filetype($dir . $file) . “<br>”;

}

closedir($dh);

}

}

?>

Praktikum 4 : operasi HTTP header

Fungsi header() akan mengirimkan HTTP header kepada client. Yang perlu diingat pada fungsi ini

adalah, fungsi ini harus dipanggil sebelum output dikirimkan.

<?

header(‘Location: http://java.sun.com&#8217;);

?>

Praktikum 5 : Operasi String

String digunakan untuk menyimpan untaian karakter. PHP memberikan beberapa fungsi untuk

memanipulasi String.

<?

/*

* File : string_demo.php

* Deskripsi : Program untuk operasi String

*/

//mengetahui panjang karakter dari String

$length = strlen(“Hello World!”);

echo “panjang string \”Hello world!\” : “.$length;

echo “<br>”;

//mencari posisi karakter dalam string

echo strpos(“Hello world!”,”world”);

?>

Praktikum 6 : File upload

PHP mendukung fungsi untuk upload file. File di bawah ini adalah file HTML yang merupakan

form untuk upload file :

<!–

File : form_upload.html

Deskripsi : Form untuk upload file

‚Äď->

<html>

<body>

<form action=”upload_file.php” method=”post”

enctype=”multipart/form-data”>

<label for=”file”>Filename:</label>

<input type=”file” name=”file” id=”file” />

<br />

<input type=”submit” name=”submit” value=”Submit” />

</form>

</body>

</html>

Program berikut akan memproses file yang diupload. Terlebih dahulu, BUATLAH folder dengan

nama ‚Äúupload‚ÄĚ yang sejajar (satu lokasi) dengan file di bawah ini maupun file form_upload.html di

atas!

<?

/*

* File : upload_file.php

* Deskripsi : Program untuk pemrosesan upload file

*/

if ($_FILES[“file”][“error”] > 0)

{

echo “Return Code: ” . $_FILES[“file”][“error”] . “<br />”;

}

else

{

echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;

echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;

echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;

echo “Temp file: ” . $_FILES[“file”][“tmp_name”] . “<br />”;

if (file_exists(“upload/” . $_FILES[“file”][“name”]))

{

echo $_FILES[“file”][“name”] . ” already exists. “;

}

else

{

move_uploaded_file($_FILES[“file”][“tmp_name”],

“upload/” . $_FILES[“file”][“name”]);

echo “Stored in: ” . “upload/” . $_FILES[“file”][“name”];

}

}

?>

Download dokumen

PHP 1

PHP2

 
Leave a comment

Posted by on October 1, 2011 in PHP

 

Tags: , , , , ,

Membuat halaman web dengan div dan kombinasi Jquery untuk menyamakan panjang kolom

Hai para isser (penggemar, pembaca tutorial dari islah prod yang dipublish melalui blog https://rumahilmukita.wordpress.com ), setelah beberapa waktu yang lalu membaca posting tentang salah satu cara mencegah SQL injection pada web dan bagaimana langkah-langkah membuat menu pada web, ada yang merasa kurang nda? Gmn? Tidak…. Ada… seharusnya ada hehe… coz belum dipublish tutorial untuk membangun halaman web, bagian utama dari web. Koq bisa disebut sebagai halaman utama web knp? Yah karena bagian tersebut yang akan menjadi dasar web kita dari side bar, content, header, footer dll. Sebenarnya ada banyak jenisnya salah satu contoh sederhana halaman juga terdapat pada posting terdahulu pada posting tentang SQL injection, disitu juga terdapat sedikit scripting tentang halaman login yang tidak jauh beda dengan halaman utama tapi tentunya sedikit lebih komplek pada halaman utama ketimabng halaman login saja karena disitu terdapat lebih dari satu bagian seperti yang telah dijelaskan tadi ada header, footer, sidebar (right content, middle content, left content) dll.

OK deh langsung dimulai aja tutorialnya… sudah siap? Are you ready? Berdoa dulu.. hehe.. biar dimudahkan untuk memahami hehe…

Siapkan notepad++ atau sejenisnya, browser, JQUERY, untuk kelengkapan selain aplikasinya dapat diunduh dibawah. Nah lo… koq ada JQUERY segala emang buat apa?nie.. buat pembaca yang bernah mencoba membangun halaman web sendiri mungkin prenah sedikit frustasi koq kolom-kolomnya tidak memiliki ukuran yang sama, nah Jquery disini akan menyediakan fungsi untuk menyamakan ukuran kolom-kolom tersebut. Di css sebetulnya juga menyediakan penyamaan kolom tersebut namanya faux column namun terkadang berjalan kurang sempurna pada IE… hehe apa itu faux column yah itu tadi barusan dijelaskan yang intinya untuk menyamakan ukuran kolom, untuk lebih jelasnya silakan searching menggunakan searc engine.

Mulai tutorial.. siapkan file page.html sebgai tempat kombinasi file jquery, css, html dan link ke file gambar atau singkatnya untuk menggabungkan semua file, setelah itu jquery.equalizecols.js, jquery-1.4.js, style.css, dan folder images sebagai tempat gambar.

 

 

download dokumentasi

Page.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”jquery-1.4.js”></script>
<script type=”text/javascript” src=”jquery.equalizecols.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#leftcontent, #middlecontent, #rightcontent”).equalizeCols();
});
</script>
</head>
<body>
<!–sebagai pengikat, bagian paling luar halaman web yang melingkupi semua page div–>
<div id=”wrapper”>
<!–berisi tampilan header–>
<div id=”container”>
<!–header berisi menu–>
<div id=”header”>
bagian header
<!–tampilan menu–>
<div id=”menu”>
<ul>
<li><a href=”#”>menu 1</a>
<ul>
<li><a href=”#”>menu 1</a></li>
<li><a href=”#”>menu 2</a></li>
<li><a href=”#”>menu 3</a></li>
<li><a href=”#”>menu 4</a></li>
<li><a href=”#”>menu 5</a></li>
</ul>
</li>
<li><a href=”#”>menu 2</a>
<ul>
<li><a href=”#”>menu 1</a></li>
<li><a href=”#”>menu 2</a></li>
<li><a href=”#”>menu 3</a></li>
<li><a href=”#”>menu 4</a></li>
<li><a href=”#”>menu 5</a></li>
</ul>
</li>
<li><a href=”#”>menu 3</a></li>
<li><a href=”#”>menu 4</a></li>
<li><a href=”#”>menu 5</a></li>
</ul>
</div>
</div>
</div>
<!–Tampilan untuk bagian kiri page–>
<div id=”leftcontent”>
<p>
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman
</p>
</div>
<!–tampilan untukbagian tengah page–>
<div id=”middlecontent”>
<p>
bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah
halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman
</p>
</div>
<!–tampilan untuk bagian kanan page–>
<div id=”rightcontent”>
<p>
bagian kanan
</p>
</div>

<!–menggabungkan ketiga tampilan bagian kiri, tengah, dan kanan page menjadi satu baris–>
<div id=”clearer”></div>
<!–tampilan footer–>
<div id=”footer”>Copyright &copy; 2011 by islah production All Rights Reserved.</div>
</div>
</body>
</html>


Style.css

/*tampilan Body, Berlaku untuk semua yang berada di dalam body secara default*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6b733c;
margin: 0px;
background-color: #FFFFFF;
}
#wrapper {
background:#c2c3bb url(images/background.jpg);
background-repeat: repeat-y;
width: 900px;
margin-right: auto;
margin-left: auto;
}

/*Top Menu*/
#wrapper #container #menu {
width: 900px;
position: relative;
top: 140px;
left: 0px;
margin: 0;
padding: 0;
background:url(images/bgmenu.png) repeat-x;
clear: both;
margin: 0px;
}
#container #menu ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
border: 0;
height: 40px;
}
#container #menu ul li {
list-style-type: none;
position: relative;
float: left;
}
#container #menu ul li a{
display: block;
float: left;
height: 22px;
width: auto;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
color: #000;
text-decoration: none;
padding-bottom: 0px;
border-right: 1px solid #1F1010;
border-left: 1px solid #fcfcf4;
}
#container #menu ul li a:hover {
color: #fff;
background-color: #000;
}
#container #menu ul li ul {
display: none;

}
#container #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
top: 32px;
z-index: 1;
}
#container #menu ul li:hover ul li a {
display: block;
left: 0px;
color: #000;
background-color: #ededea;
width: 200px;
height: 14px;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
border: 1px solid #ededea;
padding: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container #menu ul li:hover ul li a:hover {
left: 0px;
color: #FFFFFF;
border: 1px solid #000;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

/*Header*/
#wrapper #header {
background:#000 url(images/header.jpg);
height: 183px;
width: 900px;
}
#wrapper #leftcontent {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
line-height: 155%;
}

#wrapper #middlecontent {
background-color: #680102;
float: left;
width: 490px;
padding-right: 5px;
padding-left: 5px;
color: #FFFFFF;
text-align: justify;
}

#wrapper #rightcontent {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#wrapper #clearer {
clear: both;
}
#wrapper #footer {
font-size: 10px;
color: #FFFFFF;
background:#000;
text-align: center;
height: 50px;
width: 900px;
line-height: 275%;
}
#wrapper #leftcontent a:link {
color: #EE1C24;
text-decoration: none;
}
#wrapper #leftcontent a:visited {
color: #EE1C24;
text-decoration: none;
}
#wrapper #leftcontent a:hover {
color: #6600CC;
text-decoration: underline;
}

#wrapper #middlecontent a:link {
color: #FF0;
text-decoration: none;
}
#wrapper #middlecontent a:visited {
color: #FF0;
text-decoration: none;
}
#wrapper #middlecontent a:hover {
color: #FFFFFF;
text-decoration: underline;
}

#wrapper #rightcontent a:link {
color: #0000FF;
font-weight:bold;
text-decoration: none;
}

#wrapper #rightcontent a:visited {
color: #0000FF;
font-weight:bold;
text-decoration: none;
}

#wrapper #rightcontent a:hover {
color: #EE1C24;
font-weight:bold;
text-decoration: underline;
}

#menuheader {
width:100%;
height:30px;
background-color:#999;
}

 
Leave a comment

Posted by on September 26, 2011 in Belajar web, HTML

 

Tags: , , , , , ,

Membuat Menu horizontal dan vertikal halaman web

Membuat menu dan sub menu halaman web

Setelah posting-posting sebelumnya membahas tentang blogging dari pembuatan sampai operasi sederhananya, untuk kali ini akan berbagi sedikit ilmu tentang bagaimana membuat menu dan sub menu dalam membangun suatu halaman web. Sedikit diulang seperti yang pernah dijelaskan di blog ini pada wal posting mengenai apa saja yang diperlukan untuk membangun halaman web,  pada sesi kali ini hanya diperlukan notepad (rekomendasi notepad ++) dan browser untuk melihat hasilnya. Loh koq sederhana banget cuma butuh dua aplikasi? Bukanya sebelumnya diceritakan bagaimana cara menginstal aplikasi localhost/server local?. Sip… sip… wah kritis juga ente, berarti telah membaca posting sebelumnya hehe..

Jadi kalau dilihat lagi juga pada posting sebelumnya penjelasan tentang client side dan server side atau perbedaan PHP dan html, javascript, css. Secara singkatnya perbedaannya terletak pada eksekusi atau tempat dijalankannya kode, wah dikoreksi ya kalau salah jelasinnya hehe… intinya PHP butuh suatu server untuk menjalankan fungsi-fungsinya, sedangkan html, javascrip, css tidak membutuhkan cukup hanya dengan aplikasi client saja contohnya browser (firefox, IE, safari, dll)

Sudah jelaskan? Nah itulah sedikit alas an mengapa Cuma membutuhkan hanya dua aplikasi tersebut.

OK tidak usah berpanjang lebar lagi mengenai hal tersebut langsung saja kita mulai langkah-langkah membuat menu pada engineering web. Menu yang biasa kita kenal ada dua macam menu horizontal yang biasanya terletak dibagian atas web dan menu vertical yang terletak dibagian samping, sidebar, kanan atau kiri.

Pertama akan dibuat menu sidebar

Yang perlu dipahami terlebih dahulu adalah sintak dasal html seperti yang dijelaskan sebelumnya, nah untuk kali ini perlu ditambah pemahamanya tentang sintak bullet n numbering kalo dalam ms word, bagaimana sintaknya? Seperti ini

<ul>

<li>coba 1</li>

<li>coba 2</li>

<li>coba 3</li>

</ul>

Diletakkan diantara body, nah selain sintak itu juga perlu diketahui tentang sedikit css.

Liat contohnya ni

<html><head>

<title>

</title>

<style type=”text/css”>

#menu{

background:#6699CC url(images/menu.png);

position:relative;

width:100px;

border: 1px solid #000;

}

#menu ul{

list-style:none;

padding: 0px;

margin: 0px;

display:block;

}

#menu ul li{

position:relative;

}

#menu ul li a{

display:block;

border-bottom: 1px solid #000;

text-decoration:none;

color: #fff;

padding: 10px;

}

#menu ul li a:hover{

background: #000;

color: #fff;

}

#menu ul li ul{

display:none;

}

#menu ul li:hover ul{

display:block;

position:absolute;

width:100px;

left:98px;

}

#menu ul li:hover ul a{

background:#6699CC url(images/menu.png);

}

</style>

</head>

<body>

<div id=”menu”>

<ul>

<li><a href=”#”>menu 1</a>

<ul>

<li><a href=”#”>menu 1</a></li>

<li><a href=”#”>menu 2</a></li>

<li><a href=”#”>menu 3</a></li>

<li><a href=”#”>menu 4</a></li>

<li><a href=”#”>menu 5</a></li>

</ul>

</li>

<li><a href=”#”>menu 2</a>

<ul>

<li><a href=”#”>menu 1</a></li>

<li><a href=”#”>menu 2</a></li>

<li><a href=”#”>menu 3</a></li>

<li><a href=”#”>menu 4</a></li>

<li><a href=”#”>menu 5</a></li>

</ul>

</li>

<li><a href=”#”>menu 3</a></li>

<li><a href=”#”>menu 4</a></li>

<li><a href=”#”>menu 5</a></li>

</ul>

</div>

</body>

</html>

Maka hasilnya

Kemudian menu horizontal

<html>       <head>

              <title>

              </title>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <style type=”text/css”>

                     #menu{

                           position:relative;

                           width:100%;

                           height:30px;

                           background:url(images/menu.png)repeat-x;

                           border: solid 1px #000;

                     }

                     #menu ul{

                           padding:0px;

                           margin:0px;

                           list-style:none;

                     }

                     #menu ul li{

                           float:left;

                           position:relative;

                     }

                     #menu ul li a{

                           float:left;

                           color:#fff;

                           padding:5px;

                           border-right:1px solid #000;

                           text-decoration:none;

                           display:block;

                     }

                     #menu ul li a:hover{

                           background-color:#000;

                     }

                     #menu ul li ul{

                           display:none;

                           padding:0px;

                           margin:0px;

                     }

                     #menu ul li:hover ul{

                           display:block;

                           position:absolute;

                           top:31px;

                           left:0;

                     }

                     #menu ul li:hover ul li a{

                           display:block;

                           color:#fff;

                           background:#6699CC url(images/menu.png)repeat-x;;

                           color:#fff;

                           width:130px;

                     }

                     #menu ul li:hover ul li a:hover{

                           background:#000;

                           color: #fff;

                     }

              </style>

       </head>

       <body>

¬†¬†¬†¬†¬†¬† <div id=”menu”>

              <ul>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 1</a>

                           <ul>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 1</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 2</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 3</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 4</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 5</a></li>

                           </ul>

                     </li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 2</a>

                     <ul>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 1</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 2</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 3</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 4</a></li>

¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 5</a></li>

                           </ul>

                     </li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 3</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 4</a></li>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† <li><a href=”#”>menu 5</a></li>

              </ul>

       </div>       

       </body>

</html>

Selamat mencoba semoga sukses…

download kelengkapan disini

Key word jangan menyerah, segala sesuatu terasa susah karena belum terbiasa

 
Leave a comment

Posted by on September 22, 2011 in HTML

 

Tags: , , , , , , , ,

Mengoperasikan admin pada wordpress

Untuk melakukan pengaturan, perubahan tampilan, melakukan posting artikel dan lain sebagainya dalam rangka menjalankan fungsi-fungsi blogging, pemahaman tentang  operasi admin menjadi sangat penting. Terutama bagi yang bercita-cita menjadi seorang web master, pengetahuan dasar tentang operasi blog sangatlah penting. Untuk melakukan operasi admin pada wordpress hal pertama yang harus dilakukan adalah mengunjungi halaman otentivikasi atau sign in seperti ketika pembaca masuk kedalam facebook, yahoo, gmail dan lain-lain.

Langkah-langkah melakukan operasi admin pada wordpress.

  • Langkah awal untuk memasukki halaman admin adalah membuka halaman¬† autentivikasi atau log in atau sign in. Log in dapat dilakukan melalui halaman utama wordpress yaitu http://www.wordpress.com atau link pada halaman utama blog jika pembaca menampilkannya pada sidebar
  • Setelah memasukkan username dan password maka akan menuju ke halaman utama admin
  • Pilihan menu terdapat disebelah kiri halaman yang terdiri dari dashboard, post, links, pages, comments dan lain-lain.
  • Dashboard berisi uipdate dan aksimet stats. Pada halaman berisi pemberitahuan secara keseluruhan tentang operasi-operasi terakhir pada blog seperti posting, jumlah halaman, komentar, tag dan lain-lain
  • Post berisi
  • √ľ posts atau all post yang berfungsi untuk melihat secara keseluruhan posting pada blog
  • √ľ Add new bverfungsi untuk menambahkan post pada blog beserta segala pengaturannya
  • √ľ Categories berfungsi untuk melihat daftar kategori posting yang ada dan fasilitas untuk melakukan update, delete, dan add kategori
  • √ľ Post tag berisi perintah untuk untuk melakukan update delete dan tambah tag serta utnuk melihat dafatar tag yang telah ada
  • Media berisi fasilitas untuk menambahkan media atau file (gambar,audio, video, dokumen dan lain-lain) ke dalam blog. ¬†Pada media juga terdapat fasilita supdate, delete, dan add juga sama seperti fungsi-fungsi pada menu yang lainnya
  • Links berisi fasilitas untuk menambahkan tautan atau relasi ke suatu blog atau alamat web yang lainnya.
  • Pages berisi perintah untuk menambah, edit, delete pages pada blog. Pages biasanya sangat berkaitan dengan fungsi menus pada appearance
  • Comments berisi feedback atau tanggapan terhadap suatu posting pada blog. Pada bagian ini admin dapat melakukan moderasi terhadap komen yang ada. Delete
  • Appearance berisi fungsi-fungsi untuk melakukan pengaturan tampilan web yang berisi beberapa pilihan seperti
  • √ľ Themes berisi tema atau template yang sedang digunakan. Perintah lain yang ada pada bagian ini adalah penggantian tema, jadi kalao bosen terhadap tampilan yang ada dapat merubahnya di bagia ini
    • √ľ Widget berisi menu-menu pada sidebar. Pada bagian ini berisi opsi untuk menampilkan apa saja pada sidebar yang biasanya terletak pada bagian kanan atau kiri pages.
    • √ľ Bakcground berisi perintah untuk melihat atau mengubah latar atau background
    • √ľ Header berisi fasilitas untuk mengubah header sebagai identitas web atau cirri khas terhadap blog
    • √ľ Editor berisi untuk melakukan pengubahan terhadap kode-kode tertentu. Fungsi ini special buat programmer atau yang suka coding
    • *) Beberapa fungsi terkadang tidak tersedia.
  • Plugin berisi fasilitas untuk menambahkan fungsi-fungsi khusus yang dibuat oleh management wordpress
  • User berisi fasilitas untuk melakukan update, delete, tambah user blog
  • Tool berisi fasilitas impor, export
  • Setting berisi perintah untuk melakukan pengaturan general blog seperti nama danlain-lain

Semoga bermanfaat

 
Leave a comment

Posted by on September 19, 2011 in Blogging

 

Tags: , , , , ,