Sabtu, 01 Oktober 2011

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

Minggu, 25 September 2011

Membuat halaman web dengan div dan kombinasi Jquery untuk menyamakanpanjang kolom


Hai para isser (penggemar, pembaca tutorial dari islah prod yang dipublish melalui blog http://ismedianet.blogspot.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.









Page.html
<!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">
<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;
}

membuat halaman (pdf)
source code (rar)