Kamus Online Bagian 2
 
 
 

Sesuai janji saya pada postingan sebelumnya untuk men-share kode sumber kamus online yang saya bikin dalam rangka mengisi waktu libur kemaren. yeuh langsung aja ya:

A. MEMBUAT HALAMAN BERANDA KAMUS

1. Ketik atau copas kode dibawah ini ke notepad atau media sejenis lainnya terus kasih nama "index.php".

<html>
	<head>
		<title>Kamus Istilah</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<center>
			<h3>
				<form method=post action='kamus.php'>
					masukkan kata 
					<input type=text name=kata />
					<input type=submit name=submit value="cari istilah" />
				</form>
			</h3>
		</center>
	</body>
</html>
2. Copas lagi kode di bawah dan beri nama "kamus.php"
<?php
	mysql_connect("localhost","root","password");
	mysql_select_db("kamus");
	$boret = $_POST['kata'];
	include('index.php');
	$hasil = mysql_query("SELECT * FROM kata WHERE kata = '$boret'");
	or die(mysql_error());
	if ($record = mysql_fetch_array($hasil)){
		include('hasil.php');
	}else{
		echo "

maaf, kata ".$boret." yang anda cari tidak ada dalam database

" ; } ?>

ganti kata yang berwarna merah dengan -data hosting- yang anda miliki.

3. Buat file yang bernama "hasil.php" dan masukkan kode di bawah ini:
<?php
	echo "<span class=\"najib\">".$record['kata']." :</span>"."<span class=\"boret\">".$record['arti']."</span>";
?>
4. Dan untuk stylenya buat file dengan nama "style.css" dan sisipkan kode ini:
body{
	font-size:1em;
	font-family:old english text MT;
	color: #fff;
	background: #000000;
}
a{
	text-decoration:none;
	color:#666666;
}
a:hover {
	text-decoration:none;
	color: #ffffff;
}

.boret{
	margin:0;
	max-height:400px;
	width: 700px;
	height: auto !important;
	height: 400px;
	padding:6px;
	border:1px inset;
	text-align:left;
	overflow:scroll;
	/*height:;*/
	font-family:Century gothic, Arial,Tahoma,sans-serif;
	font-size:15px;
	margin:340px;
	margin-top:10px;
	display:block;
}
.najib{
	margin-top:40px;
	margin:340px;
}

catatan: Simpan keempat file ini dalam satu direktori atau folder.

B. MEMBUAT HALAMAN KIRIM DATA

Selanjutnya buat satu folder dan beri nama "kirim" (tempatkan folder ini berdampingan dengan keempat file diatas). Dalam folder ini buat beberapa file php untuk mengirimkan data ke database:

1. Buat file "index.php" dan masukkan kode:
<html>
	<head>
		<title>Kamus Istilah</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		&nbsp;
		&nbsp;
		<center>
		<div id="form">
			<form method='post' action='data.php'>
				<table width="100%" align="center" border="0" summary="This table contains testimonial form.">
					<tr>
						<td>
							<?php echo "inputkan kata: "; ?>
							<input name='kata' size="40" maxlength="50" />
						</td>
					</tr>
					<tr>
						<td>
							<?php echo "inputkan definisi: "; ?>
							<textarea name="definisi" rows="10" cols="46"></textarea>
						</td>
					</tr>
					<tr>
						<td>
							<p><input type="submit" value="sisipkan ke database" /></p>
						</td>
					</tr>
				</table>
			</form>
		</div>
		</center>
	</body>
</html>
2. Buat file "data.php" dan sisipkan kode:
<?php
	$najib = $_POST['kata'];
	$budin = $_POST["definisi"];

	mysql_connect("localhost", "root", "password") or die(mysql_error());
	mysql_select_db("kamus") or die(mysql_error());
	mysql_query("INSERT INTO kata(kata, arti)
	VALUES('$najib', '$budin')");

	echo "<h3>Data sudah dimasukkan</h3>";
	echo "<h3>kembali ke <a href='https://kamus.127.0.0.1/w174rd/kirim'>form kirim data</a> atau ke <a href='https://kamus.127.0.0.1/w174rd/'>kamus</a></h3>";
?>

ganti data "mysql_connect" dengan data hosting yang anda miliki.

3. Untuk stylenya buat file "style.css" dan sisipkan kode:
body{
	font-family:old english text MT;
	color: #fff;
	background: #000000;
}

#form{
	margin-left:500px;
	margin-top:100px;
}
  C. MEMBUAT DATABASE 1. Buat satu database dengan nama "kamus" kemudin klik tab 'SQL' dan masukkan kode dibawah lalu klik 'go':
CREATE TABLE IF NOT EXISTS `kata` (
	`kata` text NOT NULL,
	`arti` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Mungkin dalam tutorial di atas ada beberapa hal yang masih belum di pahami, jika demikian layangkan pertanyaan pada form comment. mohon maaf atas kesalahan dan kekurangannya karena program ini disusun oleh pemula yang mau menginjak semester 3 wakakak...

Untuk lebih memahami struktur dan gramatika bahasa php bisa dilihat e-booknya dan sekaligus menjadi referensi dalam pembuatan kamus online ini: [Download ] https://www.mediafire.com/?9xt4ot50t58355d

Kata kunci:

#

 


w174rd
    Komentar untuk "Kamus Online Bagian 2"
  • https://w174rd.com

    adam

    04 jan 2012 pukul 01:53

    https://adamdesigner.wordpress.com

    awal2 belajar PHP, sy bikin kamus online mas... tp masih sederhana banget salam kenal ;)

  • https://w174rd.com

    w174rd

    04 jan 2012 pukul 09:56

    https://w174rd.com

    o ya, makasih kunjungannya mass, salam kenal juga..

garis w174rd