Welcome

widget
Tampilkan postingan dengan label PTI478. Tampilkan semua postingan
Tampilkan postingan dengan label PTI478. Tampilkan semua postingan

29 Maret 2010

Pembuatan Form Login dengan PHP

Untuk membuat form Login secara sederhana dalam bahasa php dapat ditujukan pada kode program berikut ini:
1. ketik program berikut ke dalam notepad
<!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>Login</title>

</head>
<body>

<?php


$adminpass = "5f4dcc3b5aa765d61d8327deb882cf99";

"password" (md5 encryption).

session_start();

function admin(){
if(isset($_GET['logout'])) {
unset($_SESSION['logpassneh']);
echo"<META HTTP-EQUIV=\"refresh\" CONTENT=\"0; URL=$_SERVER

[PHP_SELF]\">"; }

else {
echo"<h1>Login Successful....<br />This is Page Secret<br

/>Thanks for Login</h1>
<a href=\"$_SERVER[PHP_SELF]?logout=1\">Logout</a>";
// end of page secret
} }

if(isset($_POST['password'])) {
$_POST['password']=md5($_POST['password']);
if($_POST['password']==$adminpass) {
$_SESSION['logpassneh'] = $_POST['password'];
admin(); }
else {
$true = explode("'", "Selamat Datang. ' Try Again!");
echo"<h1><font color=green>$true[0]</font></h1><a

href=\"$_SERVER[PHP_SELF]\">$true[1]</a>"; } }



elseif(isset($_SESSION['logpassneh'])) {
if($_SESSION['logpassneh']==$adminpass) {
admin(); } }

else {
echo"
<form method=POST>
Username<br />
<input type=username size=20 name=username> <br /><br />

Password<br />
<input type=password size=20 name=password> <br /><br />

<input type=submit name=login value=\"LOGIN \">
</form>"; }
?>

</body>

</html>

2. simpan dalam ekstensi .php
3. maka hasilnya seperti berikut:

4. selamat mencoba

15 Maret 2010

Passing argumen passing by value dan by reference di PHP


langsung saja kita beranjak pada acara inti,hehehehe...
Passing by Value
Semua value yang masuk atau keluar dari fungsi PHP adalah passing by value. dalam PHPnya sendiri membuat copian secara default, nilai copian yang dimanipulasi bukan value aslinya alias nilai asli yang ditampilkan, untuk lebih pahamnya lihat dan copy kode dibawah ini:

<?php
function jumlah($nilai) {
$nilai++;
}

$input=0;
jumlah($input);
echo $input;
?>

Keterangan:

$nilai++;
$nilai = $nilai + 1
$nilai = 0 + 1
$nilai = 1
Untuk output,
echo $input;

Jadi nilai yang dimanipulasi tidak ditampilkan oleh Program PHP, maka hasilnya 0, berbeda dengan Passing by reference. untuk passing by reference nilai yang dimanipulasi yang akan ditampilkan.



Hasilnya passing by value sebagai berikut:

passing by reference
<?php
function jumlah2(&$nilai) {
$nilai++;
}

$input=0;
jumlah2($input);
echo $input;
?>

Keterangan:
Pada passing by reference nilai yang dicopy dan dimanipulasi adalah nilai aslinya akan ditampilkan oleh PHP

Hasilnya bisa kita lihat berikut:


Gimana sudah jelas khan?

14 Maret 2010

Membuat greeting dalam PHP

Nah sebelum kita masuk ke dalam latihan greting, alangkah sebaiknya kita pelajari dasar-dasar PHP sebagai berikut:
1. PHP
PHP (PHP: Hypertext Preprocessor) merupakan salah satu bahasa webscripting yang sangat powerful. Sejak pertama kali diperkenalkan, bahasa ini dimaksudkan untuk menghasilkan halaman-halaman web yang dinamis. Hingga saat ini, PHP banyak sekali digunakan dalam membuat aplikasi web—baik lokal maupun Internet—dinamis dan atraktif.

2. Tipe Data
PHP mendukung delapan tipe primitif, yang terdiri dari empat tipe skalar (boolean, integer, float/double, dan string), dua tipe gabungan (array dan object), dan sisanya adalah tipe khusus (NULL dan resource). Meskipun keberadaan tipe data dalam deklarasi variabel tidak penting, namun dalam tahap selanjutnya sangatlah penting.

3. Komentar
PHP mendukung tiga jenis sintaks untuk menuliskan baris komentar, meliputi style C, C++, dan Perl/Shell.

4. Tag PHP
Parser PHP bekerja dengan menguraikan instruksi-instruksi yang diletakkan di antara tag pembuka dan penutup. Ada empat jenis style tag yang dapat kita gunakan untuk menyatakan bahwa kode merupakan instruksi PHP. Dua dari empat jenis tag yang selalu tersedia tanpa memerlukan konfigurasi adalah style XML dan SCRIPT.



Dua style tag lainnya memerlukan aktivasi dukungan di file konfigurasi
php.ini.



nah gimana?udah ada gambaran khan, ok kita masuk aja ke permasalahan pembuatan greting.


Langkah-langkahnya sebagai berikut:
1.Ketikkan program berikut ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ucapan selamat </title>
</head>

<body>

<?php
function ShowGreet($jam)
{
echo 'Pukul ';echo $jam;
if($jam<=10){echo ': Selamat Pagi';}
if($jam>=11&&$jam<=14){echo ': Selamat Siang';}
if($jam>=15&&$jam<=18){echo ': Selamat Sore';}
if($jam>=19&&$jam<=23){echo ': Selamat Malam';}
}
ShowGreet(0);
?>

</body>
</html>

2.Simpan dengan extensi .php (dot php)
3.Jalankan program dengan menggunakan wampserver maka hasilnya sebagai berikut:



4.ok mudahkan, Selamat Belajar

7 Maret 2010

Membuat Kalkulator dengan DHTML dan Java Script

Scripting merupakan jenis dari pemograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokument HTML dengan menggunakan tag . Tidak seperti style sheet, scrpt bisa terlihat di dalam ataupun
DHTML merupakn suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengkombinasikan element-element seperti HTML, style sheet, dan scripting. Jadi DHTML bukanlah suatu jenis bahasa pemograman melainkan hanya sekedar istilah saja. Pada bagian ini, pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript


Berikut langkah-langkah membuatnya:
1. Tuliskan Program di bawah ini:

<!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>membuat kalkulator</title>
</head>


<body>
<script language="JavaScript" type="text/javascript">
<!--

function rumus(){
var myForm = document.form1;
var a=eval(myForm.a.value);
var b=eval(myForm.b.value);
var ex= myForm.has.value;

if (ex == "tambah") {
var z = a + b;

}else if (ex == "kurang") {
var z = a - b;

} else if (ex == "kali") {
var z = a * b;

} else if (ex == "bagi") {
var z = a / b;

}

myForm.hasil.value = z;
myForm.a.value = "";
myForm.b.value = "";

}


function resetForm(){
document.form1.reset();
}

//-->

</script>

<form name="form1" action="#">
<input type="text" name="a" />
<select name="has">

<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>

</select>

<input type="text" name="b" />
<input type="button" value="=" onClick="rumus()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="HAPUS" onClick="resetForm()" />

</form>
</body>
</html>

2. Simpan misalnya dengan nama kalkulator.html
3. setelah di-save hasilnya tampak seperti gambar:



4. Selesai, Mudah Khan :) selamat mencoba :)

1 Maret 2010

Pembuatan Desain Layout Halaman Web Dengan Cascading Style Sheet

Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :


1.Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:


#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}

#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}Simpan dengan nama mystyle.css

2. Selanjutnya ketikkan kode berikut ini juga :

<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">


<div id="wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>

Simpan file dalam bentuk html (CSS.html)

3.Buka file html, maka hasilnya adalah :



Untuk mendesain kolom yang telah dibuat ikuti langkah-berikut :
1. tulis program berikut ini
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: yellow;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}

#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}

#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}

#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}

#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}

#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}

#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #cccccc;
border: 1px solid white;
}
#box2 {
float: left;
margin-right: 25px;
margin-top: 2px;
width: 490px;
height: 85px;
background: yellow;
border: 1px solid yellow;
}
#box7{
float: right;
margin-right:5px;
margin-top: 7px;
width: 60px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}
#box5{
float: right;

margin-top: 7px;
width: 40px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box10{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow
}
#box11{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 40px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box3{
float: right;
margin-right: 30px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid yellow;
}
#box4{
float: right;
margin-right: 30px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
2. simpan dengan nama desain1.css
3. ketikklah kode html berikut ini:
<!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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="cobatgs.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="um.jpg"/>
</div>
<div id = "box2"><h1>TEKNIK ELEKTRO</h1>
</div>
<div id = "box7">
<a href="link.html">About Us</a>
</div>
<div id = "box6">
<a href="link.html"> Contact|</a>
</div>
<div id = "box5">
<a href="link.html"> RSS| </a>
</div>
<div id = "box10">
<a href="link.html">Sitemap|</a>
</div>
<div id = "box11">
<a href="link.html"> Home|</a>
</div>
<div id = "box3">
</div>
<div id = "box4"> Search :
</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="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="jember_cin.jpg"/>
</div>
<div id = "box9">
<img src="angkatan_Q1.jpg"/>
</div>
</div>
<div id="content">
<b>Teori Konstruktivisme <br/></b>
<br/>
Teori Konstruktivisme didefinisikan sebagai pembelajaranyang bersifat generatif, yaitu tindakan mencipta sesuatu makna dari apa yang dipelajari. Konstruktivisme sebenarnya bukan merupakan gagasanyang baru, apa yang dilalui dalam kehidupan kita selama ini merupakan himpunan dan pembinaan pengalaman demi pengalaman. Ini menyebabkan seseorang mempunyai pengetahuandan menjadi lebih dinamis. Pendekatan konstruktivisme mempunyai beberapa konsep umum seperti:
1. Pelajar aktif membina pengetahuan berasaskan pengalaman yang sudah ada.
2. Dalam konteks pembelajaran, pelajar seharusnya membina sendiri pengetahuan mereka.
3. Pentingnya membina pengetahuan secara aktif oleh pelajar sendiri melalui proses saling mempengaruhi antara pembelajaran terdahulu dengan pembelajaran terbaru.
4. Unsur terpenting dalam teoriini ialah seseorang membina pengetahuan dirinya secara aktif dengan cara membandingkan informasibaru dengan pemahamannya yang sudah ada.
5. Ketidakseimbangan merupakan faktor motivasipembelajaran yang utama. Faktor ini berlaku apabila seorang pelajar menyadari gagasan-gagasannya tidak konsisten atau sesuai dengan pengetahuan ilmiah.
6. Bahan pengajaran yang disediakan perlu mempunyai perkaitan dengan pengalaman pelajar untuk menarik minat pelajar.<br/>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kuliah Tamu "Video Streaming" </li>
<li>Electro English Club (E2C)</li>
<li>Seminar Nasional "Hacking and Security"</li>
</ul>
</div>
</div>
<div id="footer">
<h3 align="center"><b>Andi Corporation</b></h3>
</div>
</div>
</body>
</html>

4. simpan dengan nama misalnya desain2.html
5.maka hasilnya sebagai berikut:


20 Februari 2010

Cara membuat Desain Web dengan memanfaatkan Table dengan HTML

Sebelum kita membuat Desain web dengan memanfaatkan Table kita persiapkan kebutuhan minimum yang dibutuhkan pada pemograman HTML antara lain:
1.Wamp Server
Paket web server Apache,PHP, dan My SQL
2.Web Browser
Disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya mencoba browser yang lain.
3.Editor Text
Untuk menuliskan kode-kode HTML. Bisa menggunakan notepad, notepad++, Dll.
4.HTML Validator
Untuk mengetahui apakah program yang kita buat valid.memasang validator pada add-on pada browser





Penggunaan Table pada bahasa pemograman web html kebanyakan penggunaannya hanya sebatas menampilkan data. Nah, bagaimana jika table yang kita buat di desain seperti pada tampilan web pada umumnya. Orang tidak akan menyangka jika desain yang kita buat menggunakan table. Mudah kok choy pembuatannya?so langkah-langkahnya sebagai berikut:
1.Ketiklah program seperti di bawah ini dengan menggunakan notepad
2.Setelah kita mengetik simpan pada program wampserver di folder www. Misalnya simpan dengan nama DesainTable.html
3.kita jalankan dengan membuka browser dan mengaktifkan wampserver. Ketikkan pada browser: localhost/nama dokumen.html misalnya: localhost/DesainTable.html
4.Jika Program yang kita buat benar maka validator pada browser kanan bawah menunjukkan tanda centang warna hijau, jika bertanda tanda seru warna kuning maka program yang kita buat ada kekeliruan tapi dianggap benar/warning pada browser., sedangkan berwarna merah tanda (x) maka berarti ada kode program yang salah.
5.Mudah khan choy?? --Selamat belajar--



atau bisa di download link dibawah ini: