Membuat Website Sederhana Dengan PHP dan MYSQL

Thursday, November 14, 2013


Membuat Website Sederhana Dengan PHP dan MYSQL

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:
  1. Buat Database data
Masuk ke phpmyadmin dan buat datanase dgn nama “data”
  1. Buat table dgn nama posingan 
 
CREATE TABLE IF NOT EXISTS `postingan` (
  `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 ;
 
  1. Buat koneksi  ke database ini scriptnya
<?php
$konek=mysql_connect("localhost","root","");
mysql_select_db("data");
?>
Simpan dgn nama koneksi.php pada folder koneksi.
  1. 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 &copy; <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://www.4shared.com/rar/_EjHjhf1/Tugas_tbl_inzoentachmadblogspo.html

pass rar: inzoentachmad

Sudah Di Update, Bila ada Masalah Silahkan beritahu saya di komentar.

23 comments:

  1. Artikel yang menarik untuk didokumentasikan dalam blog. Lebih bagusnya lagi kalau dikasih live demo-nya. Untuk live demo bisa dihost ke dropbox atau hostingan gratisan lainnya

    ReplyDelete
  2. mau dong mentahannya udah ga bisa di download soalnya

    ReplyDelete
  3. thanks yha brother.. salam dari Tetanga Timor-Leste

    ReplyDelete
    Replies
    1. Sama-sama salam balik dari tuan rumah Indonesia :)

      Delete
  4. permisi kak, knp semua file harus .php kenapa buka html ???

    ReplyDelete
  5. Password nya apa ya? File rar nya di kunci, boleh tau ga?

    ReplyDelete
  6. trima kasih saudaraku, akhirnya setelah belajar dari blog ini dan liat artikel sono sini saya juga berhaasil membuat sebuah aplikasi php sederhana aplikasi sekolah ... terima kasih mas izun

    ReplyDelete
  7. gan boleh saya minta programnya soalnya ngk bisa download .. klu boleh kirim ke willysyaputra313@yahoo.co.id semoga ilmunya bertambah gan amiiin...

    ReplyDelete
    Replies
    1. saya juga mau dong mas mentahan programnya, kalo berkenan bisa dikirim ke budhiyart@gmail.com. terimakasih sebelumnya dan salam kenal :)

      Delete
  8. makasih mas, semoga terus menebar ilmu

    ReplyDelete
  9. Setelah buat data kayak di atas kita apaiin ?

    ReplyDelete
  10. trima ksih mz..smoga tuhan memberkatimu dan jgn pernh posting yg hoax ya.

    ReplyDelete
  11. saya mau dong bro file mentahanya sama databasenya kirim ke gmail saya fardha.hari@gmail.com

    ReplyDelete
  12. gk bsa d download gan
    bsa kirim email? farhanarchman@gmail.com

    ReplyDelete