Membuat Website Sederhana Dengan PHP dan MYSQL
Saat saya belajar di SMK N TEMBARAK
Saat saya belajar di SMK N TEMBARAK
saya mendapat tugas dai guru saya yaitu Bp. TIMBUL DARJA'I...
Tugas Kali ini adalah membuat WEBSITE yang mempunyai form input,
edit, hapus dan tampil menggunakan PHP dan MYSQL, awalnya saya berfikir ini adalah tugas yang berat,
seberat ketika aku harus kehilangan wanita yang aku cintai. hahaha (lebay).. Namun setelah saya
belajar berjam-jam, berhari-hari, bahkan berabad-abad akhirnya saya bisa melahirnya sebuah karya pertama saya.
menurut pemula seperti saya web ini lumaya untuk presentasi di depan kelas,
di depan teman teman yang manis dan imut". hehe padahal pas-pasan semua wkwkwkwk.
Tutorial nya beginii:
- Buat Database data
Masuk ke phpmyadmin dan buat datanase dgn nama “data”
- Buat table dgn nama posingan
`ID` int(255) NOT NULL AUTO_INCREMENT,
`Judul` varchar(500) NOT NULL,
`Postingan` text NOT NULL,
`Tanggal` date NOT NULL,
`Gambar` varchar(500) NOT NULL,
`Komentar` varchar(5000) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;
- Buat koneksi ke database ini scriptnya
<?php
$konek=mysql_connect("localhost","root","");
mysql_select_db("data");
?>
|
Simpan dgn nama koneksi.php pada folder koneksi.
- Membuat webnya
atas.php
<?php include "koneksi/koneksi.php"; ?>
<html>
<head> <title>Achun Web</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="image/logoizun.png" rel="shortcut icon" />
</head>
<body>
<header id="header">
<div class="sosial">
<img src="image/icon/email.png" class="gbemail">
<img src="image/icon/facebook.png" class="gbfb">
<img src="image/icon/twitter.png" class="gbtwit">
<img src="image/icon/rss.png" class="gbrss"></div>
</header>
<div id="logo">
<a href="index.php">
<img src="image/logoizun.png" class="logoizun"></a>
<h1 class="judul"><a href="index.php">Zzzttt...</a></h1></p>
</div>
<div id="menu">
<h3 class="home"><a href="index.php">Home</a></h3></p>
<h3 class="menuinput"><a href="input.php">Buat Postingan</a></h3></p>
<h3 class="menudata"><a href="tampil.php">Data Postingan</a></h3></p>
</div>
<div id="isi">
<br>
|
Simpan dgn nama atas.php
samping.php
<div id="samping">
<h3 class="samping_menu">Postingan</h3>
<?php
include"koneksi/koneksi.php";
$qqqa=mysql_query("select*from postingan order by ID desc limit 5");
while($qqa=mysql_fetch_array($qqqa)){
?>
<p class="link_post">
<a href="izun.php?id=<?php echo $qqa[ID]?>">
<?php echo"$qqa[Judul]<br>"; }?></a>
</p>
<h3 class="samping_menu1">Contact</h3>
<p class="contact_person">
izunkoplak@ymail.com<br>
inzoentachmad.blogspot.com
</h4>
</div>
|
Simpan dgn nama samping.php
bawah.php
<br>
</div>
<!-- Footer -->
<div id="eek2"></div>
<div id="eek">
<h5 class="tulisanbawah">Copyright © <a class="b" href="#">InzOent</a>, <?php echo date('Y'); ?>.
</h5>
</div>
<div id="bawah">
</div>
<!-- Footer end -->
</body>
</html>
|
Simpan dgn nama bawah.php
Index.php
<?php
include"atas.php";
include"samping.php";
?>
<div id="post">
<?php
$sql = mysql_query("SELECT * FROM postingan ORDER BY ID DESC limit 3");
while ($r=mysql_fetch_array($sql)){
$konten = substr($r['Postingan'],0,300);
?>
<h3 class="jd_wel">
<a href="izun.php?id=<?php echo $r['ID']; ?>">
<?php echo $r['Judul']; ?>
</a></h3>
<?php echo $r['Tanggal']; ?>
<p id="isiwel">
<table><tr><td>
<?php
echo"<img src='koneksi/$r[Gambar]' width=50 height=50>";
?>
</td><td>
<?php
echo $konten;
?>
</td></tr></table>
<a href="izun.php?id=<?php echo $r['ID']; ?>">
Baca Selengkapnya...</a></p><br>
<?php } ?>
</div>
<?php
include "bawah.php";
?>
|
Simpan dgn nama index.php
Izun.php
<?php
$id = $_GET['id'];
$page = $_GET['page'];
?>
<?php include "atas.php";
?>
<div id="post">
<?php
$ql = mysql_query ("SELECT * FROM postingan WHERE ID='$id'");
$b = mysql_fetch_array($ql);
?>
<h3><?php echo "$b[Judul]"; ?></h3>
<?php echo "<p class='tgl_post'>$b[Tanggal]</p>"; ?>
<div class="isipostingan">
<?php echo "<img class='gmb_post' src='koneksi/$b[Gambar]'>$b[Postingan]"; ?>
</div>
<br>
<br>
<p class='back'><a href='index.php'>Kembali</a></p>
<br>
<form name="input" enctype="multipart/form-data" action="koneksi/komentar.php" method="post">
<table>
<tr><td>Komentar</td><td>:<input type="text" name="komentar"></td></tr>
<tr><td></td><td><input type="submit" value="Kirim"><input type="reset" value="Ulangi"></td></tr>
</table>
</form>
</div>
<?php include "bawah.php"; ?>
|
Simpan dgn nama izun.php
Tampil.php
<?php
include"atas.php";
?><div id="post_semua">
<?php
include"koneksi/koneksi.php";
$a=mysql_query("select * from postingan");
echo"<table align='center'><tr>";
echo"<td>ID</td>";
echo"<td>Judul</td>";
echo"<td>Postingan</td>";
echo"<td>Tanggal</td>";
echo"<td>Gambar</td>";
echo"<td>Komentar</td></tr>";
while($b=mysql_fetch_array($a)){
$konten = substr($b['Postingan'],0,100);
echo"<tr><td>$b[ID]</td>";
echo"<td>$b[Judul]</td>";
echo"<td>$konten</td>";
echo"<td>$b[Tanggal]</td>";
echo"<td><img src='koneksi/$b[Gambar]' width=30 height=50></td>";
echo"<td>$b[Komentar]</td>";
echo"<td><a href='edit.php?id=$b[ID]'>Edit</a></td>";
echo"<td><a href='koneksi/hapus.php?id=$b[ID]'>Hapus</a></td>";
}
echo"</tr></table>";
?>
</div>
<?php
include"bawah.php";
?>
|
Simpan dgn nama tampil.php
Input.php
<?php
include"atas.php";
include"koneksi/koneksi.php";
?>
<div id="post">
<form name="input" enctype="multipart/form-data" action="koneksi/proses.php" method="post">
Judul<br><input type="text" name="judul" size="98"><br>
<textarea type="text" name="postingan" cols="75" rows="10"></textarea><br>
Tanggal<br><input type="date" name="tanggal" value="<?php date(dd/mm/yyyy); ?>"><br>
Gambar<br><input name="gmb" type="file"></textarea><br>
Komentar<br><input type="text" name="komentar"><br>
<input type="submit" value="Kirim"><input type="reset" value="Ulangi">
</form>
</div>
<?php
include"bawah.php";
?>
|
Simpan dgn nama input.php
Edit.php
<?php
include"atas.php";
include"koneksi/koneksi.php";
$tampil=mysql_query("select * from postingan where ID='$_GET[id]'");
$r=mysql_fetch_array($tampil);
?>
<div id="post">
<form name='input' enctype='multipart/form-data' action='koneksi/prosesedit.php' method='post'>
Judul<br><input type='text' name='judul' size='98' value='<?php echo"$r[Judul]";?>'><br>
<textarea type='text' name='postingan' cols='75' rows='10'><?php echo"$r[Postingan]";?></textarea><br>
Tanggal<br><input type='date' name='tanggal' value='<?php echo"$r[Tanggal]";?>'><br>
Gambar<br><img src='koneksi/$r[Gambar]' height='50' width='50'><br><input type='file' name='gmb'><br>
Komentar<br><input type='text' name='komentar' value='<?php echo"$r[Komentar]";?>'><br>
<input type='submit' value='Update'>
<input name='id' type='hidden' value='<?php echo"$r[ID]"; ?>'>
</form>
<br><a href="tampil.php">Batal</a>
</div>
<?php
include"bawah.php";
?>
|
Simpan dgn nama edit.php
Hapus.php
<?php
include"koneksi.php";
$hapus=mysql_query("DELETE from postingan where ID='$_REQUEST[id]'");
if($hapus){
echo"<script>window.alert('Berhasil Di Hapus !');
window.location=('../tampil.php')</script>";
}
else{
echo"<script>window.alert('Gagal Di Gagal !');
window.location=('../tampil.php')</script>";
}
?>
|
Simpan dgn nama hapus.php
Proses.php
<?php
include"koneksi.php";
$a=$_POST[judul];
$b=$_POST[postingan];
$c=$_POST[tanggal];
$e=$_POST[komentar];
$ajudul=($_POST['judul']=="");
$d="upload/".$_FILES['gmb']['name'];
move_uploaded_file($_FILES['gmb']['tmp_name'],"upload/".basename($_FILES['gmb']['name'])); //save gambar ke folder
if($ajudul){
echo"<script>window.alert('Masukkan Judul Dulu !');
window.location=('../input.php')</script>";
}
else{
$proses=mysql_query("insert into postingan (Judul,Postingan,Tanggal,Gambar,Komentar) values ('$a','$b','$c','$d','$e') ");
echo"<script>window.alert('Berhasil Di Tambahkan !');
window.location=('../index.php')</script>";
}
?>
|
Simpan dgn nama proses.php proses ini adalah proses pada form input tepatnya pada input.php yang telah di buat tadi.
Prosesedit.php
<?php
include"koneksi.php";
$a=$_POST[judul];
$b=$_POST[postingan];
$c=$_POST[tanggal];
$e=$_POST[komentar];
$d="upload/".$_FILES['gmb']['name'];
move_uploaded_file($_FILES['gmb']['tmp_name'],"upload/".basename($_FILES['gmb']['name'])); //save gambar ke folder
$edit = mysql_query("update postingan set Judul='$a',
Postingan='$b',
Tanggal='$c',
Gambar='$d',
Komentar='$e'
where ID='$_POST[id]'");
if($edit){
echo"<script>window.alert('Berhasil Di Edit !');
window.location=('../tampil.php')</script>";
}
else{
echo"<script>window.alert('Gagal Di Edit !');
window.location=('../tampil.php')</script>";
}
?>
|
Simpan dgn nama prosesedit.php proses ini adalah proses pada form input tepatnya pada edit.php yang telah di buat tadi.
Untuk mempercantik tampilan biar cantik kaya gebetan saya hehe ni scriptnya
Style.css
body{
background:url(../image/wilshere.jpg);
background-attachment: fixed;
}
/*iki coding.e posisi nduwur ya*/
header#header{
filter:alpha(opacity=70);
opacity: .7;
margin:0 auto;
border-radius:25px 25px 0 0;
width:80%;
height: 50px;
background: url(../image/bgatas.png)repeat-x center 80%;
}
#logo{
width:80%;
margin:-5px auto;
height:100px;
background:#808088;
}
.logoizun{
margin:auto 5px;
}
.judul{
margin-left:150px;
margin-top:-35px;
}
.judul a{
text-decoration:none;
color:#000;
}
.sosial{
float:right;
margin:50px auto;
}
#menu{
width:80%;
margin:-20px auto;
height:50px;
background: url(../image/bgatas.png)repeat-x;
}
.home{
padding:8px;
}
.home a{
text-decoration:none;
color:#000;
}
.home a:hover{
background:#808088;
border-radius:5px 5px 5px 5px;
color:#fff;
}
.menuinput{
margin-top:-57px;
padding:8px;
margin-left:75px;
}
.menuinput a{
text-decoration:none;
color:#000;
}
.menuinput a:hover{
background:#808088;
border-radius:5px 5px 5px 5px;
color:#fff;
}
.menudata{
margin-top:-57px;
padding:8px;
margin-left:225px;
}
.menudata a{
text-decoration:none;
color:#000;
}
.menudata a:hover{
background:#808088;
border-radius:5px 5px 5px 5px;
color:#fff;
}
/* Menu Samping Tengen */
#samping{
border-radius:5px 5px 5px 5px;
background:#808080;
float:right;
width:35%;
margin-top:-10px;
}
.samping_menu{
margin-top:-0px;
background:#000;
color:#fff;
text-align:center;
}
.samping_menu1{
background:#000;
color:#fff;
text-align:center;
}
.link_post{
border-radius:3px 3px 3px 3px;
text-align:center;
width:100%;
margin:0 auto;
}
.link_post a{
text-decoration:none;
color:#000;
}
.contact_person{
text-align:right;
padding:5px;
}
#isi{
filter:alpha(opacity=70);
opacity: .7;
width:80%;
margin:-10px auto;
background:url(../image/isi.png);
}
.tgl_post{
margin-top:-15px;
font-size:15px;
font:bold;
}
.gmb_post{
float: right;
margin: 0px 0px 0px 0px;
width: 100px;
height: 100px;
}
.isipostingan{
background:#8B8B8B;
border-radius:5px 5px 5px 5px;
}
/* pas isine */
#post{
width:60%;
margin:auto 10px;
}
.jd_wel a{
text-decoration:none;
color:#000;
}
.jd_wel a:hover{
color:#fff;
}
#isiwel{
border-radius:5px 5px 5px 5px;
padding:5px;
background:#808088;
}
#isiwel a{
text-decoration:none;
color:#f1f1f4;
}
#post_semua{
width:90%;
margin: 0 auto ;
}
/*kode paling ngisor*/
#eek2{
height:20px;
width:80%;
margin:0 auto;
background:#808088;
}
#eek{
margin:0 auto;
height:45px;
width:80%;
background:url(../image/bgatas.png)repeat-x;
border-radius:0 0 25px 25px;
}
.tulisanbawah{
float:right;
font-size:15px;
margin-top:10px;
margin-right:10px;
color:#000;
}
.tulisanbawah a{
text-decoration:none;
color:#000;
}
|
Simpan dgn nama style.css
berikut screenshot web yang saya buat:
ini adalah menu HOme pada menu ini menampilkan postingan yang telah di buat dan disimpan pada database
serta di tampilkan dgn PHP, untuk pengaturan tampilan saya menggunakan CSS. nanti bisa di download kok tenang aja.
dan ini gambar pada form input.
bagi teman-teman yang ingin memiliki nya silahkan download aja DISINI. Atau klik pada gambar download di bawah.
saya kasih lengkap tak ada yang di sembunyikan haha.
sekian dari saya semoga bermanfaat.
http://inzoentachmad.blogspot.com/2013/11/membuat-website-sederhana-degan-php-dan.html
Tidak ada komentar:
Posting Komentar