Archive for January, 2012

Membuat halaman iframe

Posted by roqeem in html, php & mysql on January 27, 2012


berikut adalah contoh membuat iframe dibantu dengan menggunakan script php:
-buat 3 file halaman html untuk di load di dalam iframe (misalkan. hal1.html, hal2.html dan hal3.html)
-buat halaman index.php, dimana tempat untuk load halaman tersebut diatas.

file index.php :

<?
$Q = $_REQUEST["page"];

	if($Q == ""){$pager = "hal1.html";} //ini halaman pertama yg di load iframe
	else{$pager = "hal" . $Q . ".html";}
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="index.php?page=1" name="1" >Halaman 1</a> | <a href="index.php?page=2" name="2">Halaman 2</a> | <a href="index.php?page=3" name="3">Halaman 3</a><br /><br />
<iframe style="width:600px; height:300px; margin:0px auto" src="<? echo $pager;?>" ></iframe>
</body>
</html>

Leave a comment

Upload Multiple Image File Dengan PHP

Posted by roqeem in php & mysql on January 26, 2012

berikut adalah langkah2 nya:
buat table untuk menyimpan informasi foto/images:

CREATE TABLE upload_multiple (
   id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
   filename VARCHAR(200) NOT NULL,
   filesize BIGINT NULL,
   filetype VARCHAR(200) NULL,
   location VARCHAR(200) NULL,
   PRIMARY KEY(id)
);

buat file koneksi.php

<?php
$error_message = "";

if (! @mysql_connect("localhost", "root", "root"))
{
   $error_message = "Koneksi database gagal!";
}

@mysql_select_db("myphp");
?>

buat file untuk interface upload, index.php

<?php
include ("koneksi.php");
$data = @mysql_query ("select * from upload_multiple");
?>

<html>
<head>
   <title>Daftar File</title>
</head>

<body>
<h2>Daftar File</h2>
<table border="1">
   <tr>
      <th>ID</th>
      <th>Nama file</th>
      <th>Tipe</th>
      <th>Ukuran</th>
      <th>Preview</th>
   </tr>
   <?php while ($row = @mysql_fetch_assoc($data)) { ?>
   <tr>
      <td><?=$row['id'] ?></td>
      <td><?=$row['filename'] ?></td>
      <td><?=$row['filetype'] ?></td>
      <td><?=$row['filesize'] ?></td>
      <td><a href="<?=$row['location'] ?>">Preview</a></td>
   </tr>
   <?php } ?>
</table>
<p><a href="upload.php">Upload File</a></p>
</body>
</html>

buat file upload.php

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

if ($_POST){
	$path = pathinfo($_SERVER['PHP_SELF']);

	for ($i = 0; $i < count ($_FILES['userfile']['name']); $i++)
	{
		$tmp_file = $_FILES['userfile']['tmp_name'][$i];
		$filetype = $_FILES['userfile']['type'][$i];
		$filesize = $_FILES['userfile']['size'][$i];
		$filename = $_FILES['userfile']['name'][$i];
		$destination = $path['dirname'] . '/data/' . $filename;
		if (move_uploaded_file($tmp_file, $_SERVER['DOCUMENT_ROOT'] . $destination))
		{
			$result = mysql_query ("insert into upload_multiple (location,
                filetype, filename, filesize)
                values ('" . $destination . "','" . $filetype .
                "','" . $filename . "'," . $filesize . ")");
		}
	}
	header('Location: index.php');
}
?>

<html>
<head>
<title>Form Upload File</title>
</head>
<body>
<form enctype="multipart/form-data" method="post"><input type="hidden"	name="upload" value="1" />
<table border="1">
	<tr>
		<td width="50">File</td>
		<td><input type="file" name="userfile[]"></td>
	</tr>
	<tr>
		<td>File</td>
		<td><input type="file" name="userfile[]"></td>
	</tr>
	<tr>
		<td>File</td>
		<td><input type="file" name="userfile[]"></td>
	</tr>
	<tr>
		<td>File</td>
		<td><input type="file" name="userfile[]"></td>
	</tr>
	<tr>
		<td>File</td>
		<td><input type="file" name="userfile[]"></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><input type="submit" value="Upload"></td>
	</tr>
</table>
</form>
</body>
</html>

terakhir jangan lupa buat folder untuk menyimpan image/foto dengan nama folder data

source: http://www.sorsawo.com

Leave a comment

css full image background

Posted by roqeem in css, html on January 25, 2012

below is sample of Perfect Full Page Background Image, Awesome, Easy, Progressive with CSS3 Way

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

CSS-Only with Technique #2
html:

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

css:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Works in:

Safari / Chrome / Firefox (didn’t test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

source: http://css-tricks.com

Leave a comment

Design a site like this with WordPress.com
Get started